<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "">

<html lang=en>
 <head
  profile="http://dublincore.org/documents/2008/08/04/dc-html/ http://microformats.org/profile/hcard http://microformats.org/wiki/rel-license">
  <meta content="text/html; charset=utf-8" http-equiv=content-type>
  <title>CSS Template Layout Module</title>

  <meta content="width=device-width" name=viewport>
  <link href="http://purl.org/dc/terms/" rel=schema.dcterms>
  <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
   rel=dcterms.rights>
  <meta content="CSS Template Layout Module" name=dcterms.title>
  <meta content=text name=dcterms.type>
  <meta content=2016-03-01 name=dcterms.date>
  <meta content="Bert Bos" name=dcterms.creator>
  <meta content="César Acebal" name=dcterms.creator>
  <meta content=W3C name=dcterms.publisher>
  <meta content="http://dev.w3.org/csswg/css-template-3/"
   name=dcterms.identifier>
  <link href="../default.css" rel=stylesheet type="text/css">
  <style type="text/css">
  /* Just in case an incorrect max-width occurs in default.css */
  body {max-width: none !important}

  /* The TR postprocessor already inserted quotes: */
  .css::before, .property::before, .descriptor::before {content: none}
  .css::after, .property::after, .descriptor::after {content: none}

  .prod { font-family: inherit; font-size: inherit }
  pre.prod { white-space: pre-wrap; margin: 1em 0 1em 2em }
  code { font-size: inherit; }

  .example .visible {border: thin dotted silver}
</style>
  <link href="http://www.w3.org/StyleSheets/TR/2016/W3C-ED.css"
   rel=stylesheet>

 <body class=h-entry>
  <div class=head><!--begin-logo-->
   <p><a href="https://www.w3.org/"><img alt=W3C height=48
    src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width=72></a>
    <!--end-logo-->

   <h1 class=p-name>CSS Template Layout Module</h1>

   <h2 class="no-num no-toc">Editor's Draft 1 March 2016</h2>

   <dl>
    <dt>This version:

    <dd><a class=u-url
     href="http://dev.w3.org/csswg/css-template-3/">http://dev.w3.org/csswg/css-template-3/</a>

    <dt>Latest version:

    <dd><a
     href="http://www.w3.org/TR/css-template-3/">https://www.w3.org/TR/css-template-3/</a>

    <dt>Previous version:

    <dd><a
     href="https://www.w3.org/TR/2015/NOTE-css-template-3-20150326/">https://www.w3.org/TR/2015/NOTE-css-template-3-20150326/</a>

    <dt>Feedback:

    <dd><a
     href="mailto:www-style@w3.org?subject=%5Bcss3-layout%5D%20feedback">www-style@w3.org</a>
     with subject line “[css-template-3] <var>… message topic
     …</var>” (<a href="http://lists.w3.org/Archives/Public/www-style/"
     rel=discussion>archives</a>)

    <dt>Editors:

    <dd class="p-author h-card vcard"><span class="p-name fn">Bert Bos</span>
     (<span class="p-org org h-org">W3C</span>) <a class="u-email email"
     href="mailto:bert@w3.org" rel=author>bert@w3.org</a>

    <dd class="p-author h-card vcard"><span class="p-name fn">César
     Acebal</span> (<span class="p-org org h-org">University of
     Oviedo</span>)

    <dt>Editors' draft:

    <dd><a
     href="https://drafts.csswg.org/css-template/">https://drafts.csswg.org/css-template/</a>
   </dl>
   <!--begin-copyright-->
   <p class=copyright><a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
    rel=license>Copyright</a> © 2016 <a href="http://www.w3.org/"><abbr
    title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
    href="http://www.csail.mit.edu/"><abbr
    title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
    href="http://www.ercim.eu/"><abbr
    title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
    <a href="http://www.keio.ac.jp/">Keio</a>, <a
    href="http://ev.buaa.edu.cn/">Beihang</a>). W3C <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
    <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
    and <a
    href="http://www.w3.org/Consortium/Legal/copyright-documents">document
    use</a> rules apply.</p>
   <!--end-copyright-->
   <hr title="Separator for header">
  </div>
  <!--=================================================================-->

  <h2 class="no-num no-toc" id=abstract>Abstract</h2>

  <div class=sidefigure>
   <p><img alt="Image: four elements move to four slots in a template"
    longdesc=diagram.desc src=diagram.png>

   <p class=caption>Above: a typical Web page. Below: the underlying grid
    template.
  </div>

  <p>CSS is a simple, declarative language for creating style sheets that
   specify the rendering of HTML and other structured documents. This Note
   contains experimental ideas for <em>layout templates</em> and alternative
   layout models in CSS.

  <p>At the moment, it defines a <em>typographic grid</em> for CSS. It has
   features to set up a grid-based template, to style the <a
   href="#slot"><em>slots</em></a> of the template and to flow content into
   them.

  <p>A grid template can be seen as a cross between table layout (align
   blocks of text automatically in two-dimensions) and absolute positioning
   (position elements in arbitrary order), but it also has unique features of
   its own.

  <p>Grid templates can also be associated with pages in paged media (via
   ‘<code class=css>@page</code>’), to create <em>page templates.</em>

  <p>Slots can form <a href="#chains0"><em>chains,</em></a> to create
   non-rectangular regions. A chain of slots is like a series of small pages:
   content is broken at possible page breaks and distributed over the slots.

  <p><a href="#region-based-styling"><em>Region-based styling</em></a> allows
   content to be styled not only based on its position in the document tree,
   but also based on the slot it finds itself in. This is achieved by
   allowing slot names to appear in selectors.
   <!--=================================================================-->

  <h2 class="no-num no-toc" id=status>Status of this document</h2>
  <!--begin-status-->

  <p>This is a public copy of the editors' draft. It is provided for
   discussion only and may change at any moment. Its publication here does
   not imply endorsement of its contents by W3C. Don't cite this document
   other than as work in progress.

  <p>The (<a
   href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
   mailing list <a
   href="mailto:www-style@w3.org?Subject=%5Bcss-template-3%5D%20PUT%20SUBJECT%20HERE">
   www-style@w3.org</a> (see <a
   href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
   discussion of this specification. When sending e-mail, please put the text
   “css-template-3” in the subject, preferably like this:
   “[<!---->css-template-3<!---->] <em>…summary of comment…</em>”

  <p>This document was produced by the <a
   href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
   the <a href="http://www.w3.org/Style/">Style Activity</a>).

  <p>This document was produced by a group operating under the <a
   href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
   2004 W3C Patent Policy</a>. W3C maintains a <a
   href="http://www.w3.org/2004/01/pp-impl/32061/status"
   rel=disclosure>public list of any patent disclosures</a> made in
   connection with the deliverables of the group; that page also includes
   instructions for disclosing a patent. An individual who has actual
   knowledge of a patent which the individual believes contains <a
   href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
   Claim(s)</a> must disclose the information in accordance with <a
   href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
   6 of the W3C Patent Policy</a>.</p>
  <!--end-status-->

  <p>This draft combines ideas from earlier drafts on Template Layout, Grid
   Positioning <a href="#ref-CSS3GRID"
   rel=biblioentry>[CSS3GRID]<!--{{CSS3GRID}}--></a> and Grid Layout <a
   href="#ref-CSS-GRID-1"
   rel=biblioentry>[CSS-GRID-1]<!--{{CSS-GRID-1}}--></a>.

  <p>Issues on this draft are mentioned in the text itself and/or in the
   on-line Tracker under <a
   href="http://www.w3.org/Style/CSS/Tracker/products/15">“Details on
   Product CSS3 Template Layout.”</a> <!-- Decided at Sep 2014 ftf: -->

  <p><em>This document currently serves as a repository for ideas around
   using templates for laying out elements, regions or pages; and for various
   alternative layout models. It is expected to be updated, but it is not
   expected to become a W3C Recommendation in this form. Instead, ideas may
   migrate to other modules of CSS.</em>
   <!--=================================================================-->
   <nav id=toc>
   <h2 class="no-num no-toc" id=contents>Table of contents</h2>
   <!--begin-toc-->
   <ul class=toc>
    <li><a href="#introduction"><span class=secno>1. </span>Introduction</a>
     <ul class=toc>
      <li><a href="#summary-and-use-cases"><span class=secno>1.1.
       </span>Summary and use cases</a>

      <li><a href="#dependencies"><span class=secno>1.2. </span>Dependencies
       on other modules</a>

      <li><a href="#values"><span class=secno>1.3. </span>Values</a>

      <li><a href="#accessibility"><span class=secno>1.4. </span>A note about
       accessibility</a>
     </ul>

    <li><a href="#stack-of-cards-layout"><span class=secno>2. </span>Stack of
     cards layout</a>

    <li><a href="#declaring-templates"><span class=secno>3. </span>Declaring
     templates</a>
     <ul class=toc>
      <li><a href="#grid-template"><span class=secno>3.1. </span>Declaring a
       template: ‘<code class=property>grid-template-areas</code>’</a>

      <li><a href="#grid-column-sizes"><span class=secno>3.2.
       </span>Specifying the widths of columns: ‘<code
       class=property>grid-template-columns</code>’</a>

      <li><a href="#grid-template-row-sizes"><span class=secno>3.3.
       </span>Specifying the height of rows: ‘<code
       class=property>grid-template-rows</code>’</a>

      <li><a href="#grid-shorthand"><span class=secno>3.4. </span>The
       ‘<code class=property>grid</code>’ and ‘<code
       class=property>grid-template</code>’ shorthand properties</a>

      <li><a href="#default"><span class=secno>3.5. </span>Default slots</a>

      <li><a href="#columns"><span class=secno>3.6. </span>Interaction of
       ‘<code class=property>grid</code>’ and ‘<code
       class=property>columns</code>’</a>

      <li><a href="#slot-sizes"><span class=secno>3.7. </span>Calculating the
       size of the grid</a>
     </ul>

    <li><a href="#flow"><span class=secno>4. </span>Flowing content into
     slots: ‘<code class=property>flow</code>’</a>

    <li><a href="#absolute"><span class=secno>5. </span>Comparison with
     ‘<code class=css>display: grid</code>’ and ‘<code
     class=css>display: inline-grid</code>’</a>

    <li><a href="#styling-slots"><span class=secno>6. </span>Styling
     slots</a>
     <ul class=toc>
      <li><a href="#slot-pseudo"><span class=secno>6.1. </span>The ‘<code
       class=css>::slot()</code>’ pseudo-element</a>

      <li><a href="#the-blank-pseudo-element"><span class=secno>6.2.
       </span>The ‘<code class=css>::blank()</code>’ pseudo-element</a>

      <li><a href="#content"><span class=secno>6.3. </span>Slots and the
       ‘<code class=property>content</code>’ property</a>
     </ul>

    <li><a href="#region-based"><span class=secno>7. </span>Styling the
     contents of slots</a>

    <li><a href="#rendering-of-grid-elements"><span class=secno>8.
     </span>Rendering of grid elements</a>
     <ul class=toc>
      <li><a href="#vertical-alignment"><span class=secno>8.1.
       </span>Vertical alignment of the contents of slots</a>

      <li><a href="#paged"><span class=secno>8.2. </span>Breaking grid
       elements across pages or columns</a>

      <li><a href="#stacking-order"><span class=secno>8.3. </span>Stacking
       order</a>

      <li><a href="#floating-elements-inside-templates"><span
       class=secno>8.4. </span>Floating elements inside templates</a>
     </ul>

    <li><a href="#page-templates"><span class=secno>9. </span>Page-based grid
     templates</a>

    <li><a href="#chains"><span class=secno>10. </span>Chaining slots: the
     ‘<code class=property>chains</code>’ property</a>

    <li><a href="#history"><span class=secno>11. </span>History and
     discussion</a>
     <ul class=toc>
      <li><a href="#developing-a-model-of-declaring-using-st"><span
       class=secno>11.1. </span>Developing a model of declaring, using,
       styling and resizing grids</a>

      <li><a href="#syntax-features-and-levels"><span class=secno>11.2.
       </span>Syntax, features and levels</a>
       <ul class=toc>
        <li><a href="#named-vs-numbered-slots"><span class=secno>11.2.1.
         </span>Named vs numbered slots</a>

        <li><a href="#single-letter-names-vs-identifiers"><span
         class=secno>11.2.2. </span>Single letter names vs identifiers</a>

        <li><a href="#quoted-names"><span class=secno>11.2.3. </span>Quote
         marks to delimit rows or slot names</a>

        <li><a href="#display"><span class=secno>11.2.4. </span>Extend
         ‘<code class=property>display</code>’ or add a grid property</a>

        <li><a href="#combining-columns-and-grids"><span class=secno>11.2.5.
         </span>Combining columns and grids</a>

        <li><a href="#shorthand-vs-single-property"><span class=secno>11.2.6.
         </span>Shorthand vs single property</a>

        <li><a href="#the-number-of-rows-and-columns"><span
         class=secno>11.2.7. </span>The number of rows and columns</a>

        <li><a href="#need-fr"><span class=secno>11.2.8. </span>‘<code
         class=css>*</code>’ vs ‘<code class=css>fr</code>’</a>

        <li><a href="#auto-add"><span class=secno>11.2.9.
         </span>Automatically add rows and columns</a>

        <li><a href="#rectangular-slots-vs-non-rectangular-slo"><span
         class=secno>11.2.10. </span>Rectangular slots vs non-rectangular
         slots</a>

        <li><a href="#page-grid"><span class=secno>11.2.11. </span>Page
         grids</a>

        <li><a href="#style-the-slots-pseudo-elements"><span
         class=secno>11.2.12. </span>Style the slots (pseudo-elements)</a>

        <li><a href="#select-after-pseudo"><span class=secno>11.2.13.
         </span>Style the contents of slots (region-based styling)</a>

        <li><a href="#orient-the-grid-with-writing-mode-vs-ori"><span
         class=secno>11.2.14. </span>Orient the grid with writing mode vs
         orient the slots</a>

        <li><a href="#star-or-at-sign"><span class=secno>11.2.15.
         </span>Indicating the default slot (‘<code class=css>*</code>’
         vs ‘<code class=css>@</code>’)</a>

        <li><a href="#abspos"><span class=secno>11.2.16. </span>Flowing vs
         absolutely positioning content in a grid</a>

        <li><a href="#use-the-pseudo-class-to-create-additiona"><span
         class=secno>11.2.17. </span>Use the pseudo-class to create
         additional slots</a>

        <li><a href="#names-for-edges"><span class=secno>11.2.18.
         </span>Names for edges</a>

        <li><a href="#position-from-the-right-and-bottom"><span
         class=secno>11.2.19. </span>Position from the right and bottom</a>

        <li><a href="#syntax-features-to-shorten-long-grid-spe"><span
         class=secno>11.2.20. </span>Syntax features to shorten long grid
         specifications</a>

        <li><a href="#fit-content-vs-auto-vshellip"><span
         class=secno>11.2.21. </span>‘<code class=css>fit-content</code>’
         vs ‘<code class=css>auto</code>’ vs…</a>

        <li><a href="#vert-align"><span class=secno>11.2.22. </span>Vertical
         alignment inside slots</a>

        <li><a href="#horizontal-alignment-inside-slots"><span
         class=secno>11.2.23. </span>Horizontal alignment inside slots</a>

        <li><a href="#auto-margins-on-slots"><span class=secno>11.2.24.
         </span>Auto margins on slots</a>

        <li><a href="#page-floats"><span class=secno>11.2.25. </span>Page
         floats</a>

        <li><a href="#break-properties"><span class=secno>11.2.26.
         </span>Break-* properties</a>

        <li><a href="#next-same"><span class=secno>11.2.27. </span>Automatic
         placement of elements</a>

        <li><a href="#the-names-of-the-properties"><span class=secno>11.2.28.
         </span>The names of the properties</a>
       </ul>
     </ul>

    <li><a href="#conformance"><span class=secno>12. </span>Conformance</a>

    <li><a href="#changes"><span class=secno>13. </span>Changes</a>

    <li class=no-num><a href="#acknowledgments">Acknowledgments</a>

    <li class=no-num><a href="#references">References</a>

    <li class=no-num><a href="#index">Index</a>

    <li class=no-num><a href="#property-index">Property index</a>
   </ul>
   <!--end-toc--> </nav>
   <!--=================================================================-->

  <h2 id=introduction><span class=secno>1. </span>Introduction</h2>

  <p><em>(This section is not normative.)</em>

  <h3 id=summary-and-use-cases><span class=secno>1.1. </span>Summary and use
   cases</h3>

  <div class=sidefigure>
   <p><img alt="Image: four elements move to four slots in a template"
    longdesc=diagram.desc src=diagram.png>

   <p class=caption>Above: a typical Web page. Below: the underlying grid
    template. It has four slots, a, b, c and d and the grid template is
    defined by ‘<code class=css>grid: "a a a a a a a" "b c c c c d
    d"</code>’.
  </div>

  <p class=mtb>The styling of a Web page, a form or a graphical user
   interface can roughly be divided into two parts: (1) defining the overall
   “grid” of the page or window and (2) specifying the fonts, indents,
   colors, etc., of the text and other objects. The two are not completely
   separate, of course, because indenting or coloring a text influences the
   perceived grid as well. Nevertheless, when one separates the parts of a
   style that should change when the window gets bigger from the parts that
   stay the same, one often finds that the grid changes (different number of
   columns and rows, different order for the blocks of content, less or more
   open space between those blocks, etc.), while fonts, colors, indents,
   numbering styles, and many other things don't have to change, until the
   size of the window becomes extreme.

  <p>The properties in this specification associate a layout grid with an
   element (or with a page, see below). Rather than rendering all descendants
   of an element in a single flow, they give an element multiple flows,
   called <a href="#slot">slots,</a> placed on an invisible grid by means of
   a <span>grid template.</span> The descendants are given a ‘<a
   href="#flow0"><code class=property>flow</code></a>’ property to
   designate the slot into which they flow.

  <p>Because layouts on the Web have to adapt to different window and paper
   sizes, the rows and columns of the grid can be made fixed or flexible in
   size.

  <p class=note>In some typographical traditions, the slots are called
   “<span class=index id=fields
   title="field (of a typographical grid)">fields</span>” or “<span
   class=index id=spatial-zones. title="spatial zone">spatial
   zones.</span>” Traditionally, also, all columns have the same width,
   called the “<span class=index id=module
   title="module (of a typographical grid)">module</span>” or “<span
   class=index id=unit title="unit (of a typographical grid)">unit</span>.”
   The horizontal lines of a grid that define the rows are sometimes called
   “<span class=index id=flow-lines. title="flow line">flow
   lines.</span>” Some traditions make the space between pieces of content
   an explicit part of the grid, some consider the space part of the content:
   Both styles are possible in CSS, the latter by using the ‘<a
   href="#margin"><code class=property>margin</code></a>’ property, the
   former by using the ‘<code class=css>.</code>’ symbol in a grid
   template.

  <p>The typical use cases for these properties include:

  <ul>
   <li>
    <p>Complex Web pages, with multiple navigation bars in fixed positions,
     areas for advertisements, etc.

   <li>
    <p>Complex forms, where the alignment of labels and form fields may be
     easier with the properties of this module than with the properties for
     tables, floats and margins.

   <li>
    <p>GUIs, where buttons, toolbars, labels, icons, etc., are aligned in
     complex ways and have to stay aligned (and not wrap, for example) when
     the window is resized.

   <li>
    <p>Paged displays (e.g., printed media) where each page is divided into
     fixed areas for different kinds of content.

   <li>
    <p>Complex pages with multiple regions, where the style of the text does
     not only depend on the type of element it comes from, but also on the
     region it is displayed in (<a
     href="#region-based-styling"><em>region-based styling</em></a>).

   <li>Paged displays with complex running headers and footers, e.g., running
    headers that are in between parts of the page content, rather than at the
    edge of the page.
  </ul>

  <p>Once a grid template has been defined, it can also be used to position
   elements without adding them to a flow. Setting ‘<code
   class=css>display: grid</code>’ on a grid element makes all children
   into separate flows and automatically distributes them over the grid. This
   is explained in <cite>CSS Grid Layout</cite> <a href="#ref-CSS-GRID-1"
   rel=biblioentry>[CSS-GRID-1]<!--{{!CSS-GRID-1}}--></a>.

  <p>Template-based positioning makes many traditional uses of absolute
   positioning unnecessary. Like absolute positioning, grid templates are
   especially useful for aligning elements that don't have simple
   relationships in the source (parent-child, ancestor-descendant, immediate
   sibling). But in contrast to absolute positioning, the elements are not
   positioned with the help of horizontal and vertical coordinates, but by
   flowing them into a template that is very much like a table: The size and
   alignment of elements are governed implicitly by the rows and columns of
   the template, and can automatically adapt to the overall size of the
   element and to the content in each row and column.

  <div class=example>
   <p>In this example, the four children of an element are assigned to four
    slots (called a, b, c and d) in a 2×2 template. (All mark-up examples in
    this specification are HTML fragments, unless otherwise stated.)

   <div class=sidefigure>
    <p><img alt="Image: sample rendering" longdesc=aapje.desc src=aapje.png>

    <p class=caption>Each element occupies one slot. In this template, all
     slots have the same size.
   </div>

   <pre>
&lt;style type="text/css"&gt;
  dl { grid: "a b"
             "c d" }
  #sym1 { flow: a }
  #lab1 { flow: b }
  #sym2 { flow: c }
  #lab2 { flow: d }
&lt;/style&gt;
&lt;dl&gt;
  &lt;dt id=sym1&gt;A
  &lt;dd id=lab1&gt;A is een aapje
  &lt;dt id=sym2&gt;B
  &lt;dd id=lab2&gt;B is de bakker
&lt;/dl&gt;
</pre>

   <p><a href=ex-aapje.html>Try it out!</a> (Uses a JavaScript emulation in
    browsers that do not implement grid templates natively.)
  </div>

  <div class=example>
   <p>Templates can also help with device-independence. This example uses
    Media Queries <a href="#ref-MEDIAQ"
    rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a> to change the overall
    layout of a page from 3-column layout for a wide screen to a 1-column
    layout for a narrow screen. It assumes the page has been marked-up with
    logical sections with IDs.

   <pre>
@media all
{
  body { grid: "a a a"
               "b c d" }
  #head { flow: a }
  #nav { flow: b }
  #adv { flow: c }
  #body { flow: d }
}
@media all and (max-width: 500px)
{
  body { grid: "a"
               "b"
               "c" }
  #head { flow: a }
  #nav { flow: b }
  #adv { display: none }
  #body { flow: c }
}
</pre>
  </div>

  <div class=example>
   <p>The slots in a grid do not overlap, unless with negative margins. Here
    is how the <a
    href="http://www.csszengarden.com/?cssfile=/026/026.css&amp;page=0">
    “zunflower” design</a> of the CSS Zen Garden could be done:

   <pre>
#container {grid: "A B C"}
#container::slot(A) {box-shadow: 0.5em 0.5em 0.5em; z-index: 1}
#container::slot(B) {box-shadow: 0.5em 0.5em 0.5em; margin-left: -2em}
#intro {flow: A}
#supportingText {flow: B}
#linkList {flow: C}
</pre>
  </div>

  <div class=example>
   <p>Template-based positioning borrows some concepts from table layout, in
    particular the idea of aligning elements in rows and columns, so that
    they constrain one another's size. But there are also differences. This
    example shows some of them. Assume this document fragment:

   <pre>
&lt;div class=group>
 &lt;div>aa aa aa aa aa aa&lt;/div>
 &lt;div>bbb&lt;/div>
 &lt;div class=menu>ccccc&lt;/div>
&lt;/div>
</pre>

   <p>We can lay it out as three columns, as the following illustrations
    show. The style sheet would contain the following.

   <pre>
.group {display: table}
.group > div {display: table-cell}
</pre>

   <div class=figure>
    <p><img alt="[Three unequal cells]" longdesc=table1.desc src=table1.png>

    <p class=caption>Example of rendering with a table.
   </div>

   <p>We can also use a template, in which case the style sheet would contain
    this:

   <pre>
.group {grid: "a b c"}
.group > div {flow: a}
.group > div + div {flow: b}
.group > div + div + div {flow: c}
</pre>

   <p>By default, the table is as wide as needed to fit its contents. To make
    sure it is as wide as its containing block, we need to add

   <pre>.group {display: table; <i>width: 100%</i>}</pre>

   <p>That is not needed for the grid template, but, on the other hand, if we
    want the template to fit its contents, we would need to say so:

   <pre>.group {grid: "a b c"; <i>width: fit-content</i>}</pre>

   <p>(See <a href="#ref-CSS3BOX"
    rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a> for the definition of
    the ‘<a href="#width"><code class=property>width</code></a>’
    property.) The columns of the template are by default all the same size.
    The columns of the table satisfy certain constraints, but their sizes may
    differ. We can make them all the same by adding a rule (see <a
    href="#ref-CSS3TBL" rel=biblioentry>[CSS3TBL]<!--{{!CSS3TBL}}--></a>):

   <pre>.group {display: table; width: 100%; <i>table-layout: fixed</i>}</pre>

   <div class=figure>
    <p><img alt="[Three equal cells]" longdesc=table2.desc src=table2.png>

    <p class=caption>Example of rendering with equal columns.
   </div>

   <p>In both styles, we can set a column to a certain size:

   <pre>div:nth-child(3) {<i>width: 3em</i>}</pre>

   <p>resp.,

   <pre>.group {grid: <i>* * 3em</i>  "a b c"}</pre>

   <div class=figure>
    <p><img alt="[Two equal cells, third is 3em wide]" longdesc=table3.desc
     src=table3.png>

    <p class=caption>Example of rendering with a fixed third column and the
     other two columns of equal width.
   </div>

   <p>If there is an unknown number of columns (children of the div.group
    element), the style sheet for the table model will automatically take
    them into account. The style sheet for the template model, however,
    creates a template of exactly three columns and can't handle tables with
    an unknown number of columns. The extra elements will be added into the
    default slot (in this case the ‘<code class=css>a</code>’ slot).

   <p>(However, setting ‘<a href="#display0"><code
    class=property>display</code></a>’ to ‘<a href="#grid"><code
    class=property>grid</code></a>’ on the grid element creates a different
    kind of grid, that <em>does</em> grow, see <a
    href="#absolute">“Comparison with ‘<code class=css>display:
    grid</code>’ and ‘<code class=css>display:
    inline-grid</code>’”</a> below.)

   <p>In both models, elements can have borders, but only in the table model
    can borders be collapsed, which makes setting borders easier in the table
    model:

   <pre>
.group {display: table; <i>border-collapse: collapse</i>}
.group > div {<i>border: solid</i>}
</pre>

   <p>resp.,

   <pre>
.group > div {<i>border: solid; border-left: none</i>}
.group > div:first-child {<i>border-left: solid</i>}
</pre>

   <p>In the template model, the order of the elements is explicit, and thus
    it is possible to reverse the order of the columns:

   <pre>
.group > div {flow: <i>c</i>}
.group > div + div {flow: b}
.group > div + div + div {flow: <i>a</i>}
</pre>

   <div class=figure>
    <p><img alt="[Different contents for the cells]" longdesc=table4.desc
     src=table4.png>

    <p class=caption>Example of rendering with the contents of the three
     columns reversed: the third element is shown in the first slot and the
     first element in the third slot.
   </div>

   <p>In the table model, the order of the rows and columns is given by the
    document source and thus cannot be changed.
  </div>

  <div class=example>
   <p>[Editorial note: Remove this example if the ‘<a
    href="#content1"><code class=property>content</code></a>’ property will
    <em>not</em> be allowed on elements, as it is currently expected to be.]

   <p>This example shows a way to move notes to the end of a section.
    “Notes” in this example refers to elements in HTML with a class of
    “note”. A fragment of HTML such as

   <pre>
&lt;div class=section>
  &lt;p>The balubious coster of the fifth secter&lt;span
    class=note> The sixth secter coster is a difter
    manon.&lt;/span> of The Rollow Carpug mentizes a costernica.
  &lt;p>…
&lt;/div>
</pre>

   <p>with this style sheet

   <pre>
div.section {
    grid: "*"
          "F"}
.note {
    flow: F;
    content: counter(note) ".\A0" contents;
    counter-increment: note;
    font-size: smaller}
.note::before {
    content: counter(note);
    vertical-align: super;
    font-size: larger}
</pre>

   <p>results in a rendering similar to this:

   <div class=figure>
    <p><img
     alt="Same text, with the SPAN replaced by “(1)” and its content moved to the end."
     longdesc=footnotes.desc src=footnotes.png>

    <p class=caption>Rendering of a text with footnotes.
   </div>

   <p>The “Generated content for paged media” module <a
    href="#ref-CSS3GCPM" rel=biblioentry>[CSS3GCPM]<!--{{CSS3GCPM}}--></a> is
    expected to define specific features for footnotes that are both easier
    and more powerful than this example.
  </div>

  <div class=example>
   <p>This example shows the use of <a class=index href="#chain."
    id=chained-regions title=chain>chained regions:</a> text from region 1
    continues in region 2, 3 and 4. And it shows how to use pseudo-elements
    to style text in a particular region: text in region 1 is bigger than in
    other regions.

   <div class=figure>
    <p><img alt="Image of a complex, 3-column layout"
     longdesc=regions-intro-rendering.desc src=regions-intro-rendering.png>

    <p class=caption>Example rendering
   </div>

   <p>We assume a document fragment similar to this:

   <pre>
&lt;div id=article>
  &lt;h1>Introduction&lt;/h1>
  &lt;p>&lt;img src="sunset" alt="">
  &lt;p>This is an example…

  &lt;h1>More Details&lt;/h1>
  &lt;p>This illustrates…
  &lt;p>Then, the example…
  &lt;p>Finally, this…
&lt;/div>
</pre>

   <p>The style sheet makes the DIV into a grid element with five regions,
    called A, *, b, c and d. The regions are grouped into two chains: region
    A on its own, and the chain consisting of *, b, c and d.

   <pre>
#article {
  <a class=index href="#grid" id=grid0>grid</a>: "A A c"
        "A A c"
        "* * c"
        "a b c";
  <a
    class=index href="#chains0" id=chains1>chains</a>: * a b c }
</pre>

   <p>The ‘<code class=css>*</code>’ is a special name. It indicates the
    <a href="#default-slot."><em>default slot,</em></a> the slot where
    content goes if it doesn't have an explicit ‘<a href="#flow0"><code
    class=property>flow</code></a>’ property. We could have used a normal
    letter and added an explicit ‘<a href="#flow0"><code
    class=property>flow</code></a>’ property to the children of the DIV,
    but by using * we don't have to. All children thus go into region * (and
    continue in a, b and c as needed). The IMG element goes into region A. We
    assume for simplicity that there is only one IMG element:

   <pre>#article img { flow: A }</pre>

   <p>The text in region * is bolder, larger and a different color than in
    the other regions. Also, an H1 that falls into this region is rendered
    differently from other H1s:

   <pre>
<a class=index href="#atregion" id=atregion0>@region</a> ::slot(*)
{
  * {
    font-weight: bold;
    color: #0C3D5F;
    font-size: larger }
  h1 {
    color: crimson;
    display: run-in }
}
</pre>

   <p>(For brevity, the example doesn't show the style rules to set the color
    and background, to make the text justified, add the left border to the
    second H1, etc.)

   <p>As the image shows, the text of the last paragraph isn't complete and
    presumably continues somewhere else, but that part is outside the scope
    of this example. In paged media, we could attach the grid template to a
    page instead of an element and let the text continue on the next page; we
    could also make slot c into a multi-column element so that the text forms
    additional columns to the right of current image (see <a
    href="#ref-CSS3GCPM" rel=biblioentry>[CSS3GCPM]<!--{{CSS3GCPM}}--></a>
    for some ideas), or there could be a scrollbar on slot c.
  </div>

  <div class=example>
   <p>This example shows three ways to align the contents of a fixed-height
    paragraph to the bottom of the box:

   <dl>
    <dt>Method 1

    <dd>
     <pre>P {height: 20em; grid: "." "*" fit-content}</pre>

    <dt>Method 2

    <dd>
     <pre>P {height: 20em; grid: "*"}
P::slot(*) {vertical-align: bottom}</pre>

    <dt>Method 3

    <dd> [Editorial note: Remove method 3 if <a class=index
     href="#vertical-align" id=vertical-align0>vertical-align</a> will
     <em>not</em> be generalized to apply to all blocks.]
     <pre>P {height: 20em; vertical-align: bottom}</pre>
   </dl>

   <p>However, the styles differ in case the content is taller than 20 em
    and overflows: the first style has a baseline-aligned content which will
    thus overflow <em>below</em> the element's box; the second example has
    bottom-aligned content, which will thus overflow <em>above</em> the
    element's box.
  </div>

  <div class=example>
   <p>This example (based on a challenge by Andrew Fedoniouk) shows how a
    grid template can be used to display six items in two rows of three.
    Assume the following document:

   <pre>
&lt;p&gt;
  &lt;span&gt;...&lt;/span&gt;
  &lt;span&gt;...&lt;/span&gt;
  &lt;span&gt;...&lt;/span&gt;
  &lt;span&gt;...&lt;/span&gt;
  &lt;span&gt;...&lt;/span&gt;
  &lt;span&gt;...&lt;/span&gt;
&lt;/p&gt;
</pre>

   <p>The simplest way to break this into two lines (or more) is to add a
    hard line break after the third SPAN: ‘<code
    class=css>span:nth-child(3)::after {content: "\A"; white-space:
    pre}</code>’. That works fine, unless the SPANs are inline blocks
    (‘<code class=css>span {display: inline-block}</code>’). Another way
    is to float all SPANs and add a ‘<code class=property>clear</code>’
    property on the fourth: ‘<code class=css>span {float: left}
    span:nth-child(4) {clear: left}</code>’. But if the SPANs have
    different heights or baselines, their vertical alignment will be
    different than if they were on the same line.

   <p>With a grid template, we can say that the P has not one, but two flows,
    a and b, the second one positioned below the first; and then we assign
    the fourth and subsequent SPANs to the “b” flow. (The others
    automatically go into the default, first flow.)

   <pre>
p {grid: "a" "b"}
span:nth-child(n+4) {flow: b}
</pre>

   <p>This almost works. There is just a subtle issue with the spaces between
    the SPANs. We moved the last three SPANs to flow b, but we have no way to
    move the spaces between them. They remain in the default (first) slot.
    (They collapse, as there is nothing left between them, so we don't
    actually see them anymore.) To get spaces between the SPANs in slot b, we
    need to generate new spaces:

   <pre>span:nth-child(n+4)::after {content: " "}</pre>

   <p class=issue>This space handling is not very intuitive. One might expect
    there to be a way to say “select everything from this element onward”
    or maybe a pseudo-element selector for the text between elements. Or a
    new property to specify different ways to handle the anonymous text
    inside a grid element. For the moment, there is no such thing.
    Suggestions are welcome.

   <p>If, on the other hand, we <em>don't</em> want spaces between the SPANs,
    then the question becomes how to get rid of the spaces between the SPANs
    in the first row. There are several ways of doing that. One way is to
    explicitly flow the three first SPANs to slot “a”:

   <pre>span {flow: a}</pre>

   <p>The SPANs are thus taken out of the P, causing the P's spaces to end up
    next to each other at the start of flow “a” and collapse away.
    Another, maybe more intuitive way is to set the spaces to zero width in
    the P, and then back to normal in the SPANs (see ‘<a
    href="#word-spacing"><code class=property>word-spacing</code></a>’ in
    <a href="#ref-CSS-TEXT-3"
    rel=biblioentry>[CSS-TEXT-3]<!--{{CSS-TEXT-3}}--></a>):

   <pre>
p {word-spacing: -100%}
span {word-spacing: normal}
</pre>

   <p>[Editorial note: Remove this last method if percentage values on ‘<a
    href="#word-spacing"><code class=property>word-spacing</code></a>’ will
    not be allowed. They currently (March 2015) have Working Draft status.]
  </div>

  <div class=example>
   <p>This example uses a <a href="#page-based-template"><em>page-based
    template</em></a> to create a running header that is not at the top of
    the page, but exactly in the middle. We need to define our own page
    template for this, because the predefined page template of <a
    href="#ref-CSS3PAGE" rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a>
    only has margin boxes along the edge of the page.

   <pre>
@page {
  grid:
    "top-half"
    "running-header" 3em
    "bottom-half";
  chains: top-half bottom-half
}
::slot(running-header) {
  content: "My Magazine - page " counter(page) " - February 2013";
  text-align: center;
  <a
    class=index href="#vertical-align"
    id=vertical-align1>vertical-align</a>: middle;
  border: solid;
  margin: 1em 0;
}
</pre>

   <div class=figure>
    <p><img alt="Image: Example rendering" longdesc=page.desc src=page.png>

    <p class=caption>An example of a page rendered with the above page
     template. It has the “running header” with the page number right in
     the middle of the page.
   </div>
  </div>
  <!--=================================================================-->

  <h3 id=dependencies><span class=secno>1.2. </span>Dependencies on other
   modules</h3>

  <p>This CSS3 module depends on the following other CSS3 modules:

  <ul>
   <li><cite>CSS 2.1</cite> <a href="#ref-CSS21"
    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> – <a
    href="https://www.w3.org/TR/CSS21/visuren.html#block-boxes"><dfn
    id=block-container>block container,</dfn></a> the property <dfn
    id=content0>content,</dfn> and the concept of <dfn
    id=stacking-context.>stacking context.</dfn>

   <li><cite>CSS syntax module</cite> <a href="#ref-CSS3SYN"
    rel=biblioentry>[CSS3SYN]<!--{{!CSS3SYN}}--></a> – <dfn
    id=interactive>interactive</dfn> vs <dfn
    id=non-interactive>non-interactive</dfn> media.

   <li><cite>CSS values and Units module</cite> <a href="#ref-CSS3VAL"
    rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a> – <a
    href="https://www.w3.org/TR/css3-values#strings"> <dfn
    id=ltstringgt><var>&lt;string&gt;</var></dfn></a> and <a
    href="https://www.w3.org/TR/css3-values#length-value"> <dfn
    id=ltlengthgt><var>&lt;length&gt;</var></dfn></a>.

   <li><cite>CSS box module</cite> <a href="#ref-CSS3BOX"
    rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a> – properties <dfn
    id=margin>margin</dfn>, <dfn id=margin-right>margin-right</dfn>, <dfn
    id=margin-left>margin-left</dfn>, <dfn id=width>width</dfn>, <dfn
    id=height>height</dfn>, <dfn id=float>float</dfn>, <dfn
    id=display0>display</dfn> and <dfn id=overflow>overflow</dfn>;
    definitions of the terms <dfn id=intrinsic-minimum>intrinsic
    minimum</dfn> and <dfn id=intrinsic-preferred>intrinsic preferred</dfn>
    (as in the phrases “intrinsic preferred width” and “intrinsic
    minimum width,” referring roughly to the width of the content without
    breaking any lines and the width with as many line breaks as possible.)

   <li><cite>CSS text layout</cite> <a href="#ref-CSS-WRITING-MODES-3"
    rel=biblioentry>[CSS-WRITING-MODES-3]<!--{{!CSS-WRITING-MODES-3}}--></a>
    – defines <dfn id=block-flow-direction>block flow direction</dfn> and
    the properties <dfn id=direction>direction</dfn> and <dfn
    id=writing-mode>writing-mode</dfn>. The latter defines when an element
    has a <dfn id=vertical-writing-mode>vertical writing mode</dfn> (text
    lines are vertical) or a <dfn id=horizontal-writing-mode>horizontal
    writing mode</dfn> (text lines are horizontal). For brevity, we refer to
    the former as a <dfn id=vertical-element
    title="vertical|vertical element">vertical element</dfn> and to the
    latter as a <dfn id=horizontal-element.
    title="horizontal|horizontal element">horizontal element.</dfn>

   <li><cite>CSS positioning</cite> <a href="#ref-CSS3POS"
    rel=biblioentry>[CSS3POS]<!--{{!CSS3POS}}--></a> – properties <dfn
    id=z-index>z-index</dfn>, <dfn id=position>position</dfn>, <dfn
    id=top>top</dfn>, <dfn id=right>right</dfn>, <dfn id=bottom>bottom</dfn>,
    <dfn id=left>left</dfn>.

   <li><cite>CSS fragmentation</cite> <a href="#ref-CSS-BREAK-3"
    rel=biblioentry>[CSS-BREAK-3]<!--{{CSS-BREAK-3}}--></a> – properties
    <dfn id=break-before>break-before</dfn>, <dfn
    id=break-after>break-after</dfn> and <dfn
    id=break-inside>break-inside</dfn>; the definition of <dfn
    id=fragmenter>fragmenter</dfn>.

   <li><cite>CSS paged media</cite> <a href="#ref-CSS3PAGE"
    rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a> – definition of <dfn
    id=page-area>page area</dfn> (in particular its width &amp; height).

   <li><cite>CSS background and borders</cite> <a href="#ref-CSS3BG"
    rel=biblioentry>[CSS3BG]<!--{{CSS3BG}}--></a> – properties <dfn
    id=background>background</dfn>, <dfn
    id=background-image>background-image</dfn>, <dfn
    id=background-size>background-size</dfn>, <dfn
    id=box-decoration-break>box-decoration-break</dfn> <span class=issue>and
    <dfn id=box-shadow>box-shadow</dfn>?</span>

   <li><cite>CSS tables</cite> <a href="#ref-CSS3TBL"
    rel=biblioentry>[CSS3TBL]<!--{{!CSS3TBL}}--></a> – property <dfn
    id=vertical-align>vertical-align</dfn>. <span class=issue>[or Box
    Module?]</span>

   <li><cite>CSS Multi-column Layout Module</cite> <a href="#ref-CSS3COL"
    rel=biblioentry>[CSS3COL]<!--{{CSS3COL}}--></a> – property <dfn
    id=columns0>columns</dfn>.

   <li><cite>CSS Generated and replaced content module level 3</cite> <a
    href="#ref-CSS3GENCON"
    rel=biblioentry>[CSS3GENCON]<!--{{!CSS3GENCON}}--></a> – property <dfn
    id=content1>content</dfn>.

   <li><cite>CSS regions</cite> <a href="#ref-CSS-REGIONS-1"
    rel=biblioentry>[CSS-REGIONS-1]<!--{{!CSS-REGIONS-1}}--></a> – at-rule
    <dfn id=atregion>@region</dfn> and the term <dfn id=region.>region.</dfn>

   <li><cite>CSS Grid Layout</cite> <a href="#ref-CSS-GRID-1"
    rel=biblioentry>[CSS-GRID-1]<!--{{!CSS-GRID-1}}--></a> – the term <dfn
    id=grid-container>grid container</dfn> and the properties <dfn
    id=grid-auto-flow>grid-auto-flow</dfn>, <dfn
    id=grid-auto-columns>grid-auto-columns</dfn> and <dfn
    id=grid-auto-rows>grid-auto-rows</dfn>. (Note: A grid container is an
    element with a ‘<a href="#display0"><code
    class=property>display</code></a>’ of ‘<a href="#grid"><code
    class=css>grid</code></a>’ or ‘<code
    class=css>grid-inline</code>’.)

   <li><cite>CSS Cascading and Inheritance Level 3</cite> <a
    href="#ref-CSS3CASCADE"
    rel=biblioentry>[CSS3CASCADE]<!--{{!CSS3CASCADE}}--></a> – keywords
    <dfn id=inherit>inherit,</dfn> <dfn id=initial>initial</dfn> and <dfn
    id=unset.>unset.</dfn>
  </ul>

  <p class=issue>Add to the above all the properties that are allowed on
   slots (see <a href="#slot-pseudo">“Styling slots: the ‘<code
   class=css>::slot()</code>’ pseudo-element”</a>).

  <p>It has non-normative (informative) references to the following other
   CSS3 modules:

  <ul>
   <li><cite>Selectors</cite> <a href="#ref-SELECT"
    rel=biblioentry>[SELECT]<!--{{SELECT}}--></a>

   <li><cite>CSS Text Module Level 3</cite> <a href="#ref-CSS-TEXT-3"
    rel=biblioentry>[CSS-TEXT-3]<!--{{CSS-TEXT-3}}--></a> – the <dfn
    id=word-spacing>word-spacing</dfn> property
  </ul>

  <p>See <a
   href="https://www.w3.org/TR/CSS21/about.html#property-defs">section 1.4.2
   of CSS level 2</a> <a href="#ref-CSS21"
   rel=biblioentry>[CSS21]<!--{{CSS21}}--></a> for the grammar and other
   notations that this specification uses in property definitions.
   <!--=================================================================-->

  <h3 id=values><span class=secno>1.3. </span>Values</h3>

  <p>This specification follows the <a
   href="https://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
   definition conventions</a> from <a href="#ref-CSS21"
   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in
   this specification are defined in CSS Level 2 Revision 1 <a
   href="#ref-CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS
   modules may expand the definitions of these value types: for example <a
   href="#ref-CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>,
   when combined with this module, expands the definition of the
   &lt;color&gt; value type as used in this specification.

  <p>In addition to the property-specific values listed in their definitions,
   all properties defined in this specification also accept the ‘<a
   href="#inherit"><code class=css>inherit</code></a>’, ‘<a
   href="#initial"><code class=css>initial</code></a>’, and ‘<a
   href="#unset."><code class=css>unset</code></a>’ keywords as their
   property value.
   <!--=================================================================-->

  <h3 id=accessibility><span class=secno>1.4. </span>A note about
   accessibility</h3>

  <p><em>(This section is not normative.)</em>

  <p>The facilities in this specification allow elements from a document to
   be displayed in a visual order that is to a large extent independent of
   the order in the document. That may have both positive and negative
   effects on accessibility. The positive aspect is that it allows the
   content in the document to be kept in logical order, so that the document
   is as functional as possible without the style sheet and on media where
   the style sheet doesn't apply. A negative aspect is that a document that
   has a defined tab order (the order in which elements get the focus when
   the tab-key is pressed) will show on the screen with a tab order unrelated
   to the visual order. It may be necessary to use the keyboard control
   features of the CSS Basic User Interface module <a href="#ref-CSS-UI-3"
   rel=biblioentry>[CSS-UI-3]<!--{{CSS-UI-3}}--></a> to ensure that the tab
   navigation follows the visual order, or to refrain from positioning
   semantically related elements in different parts of a template.

  <p>The following two requirements from the Web Content Accessibility
   Guidelines (WCAG) 2.0 <a href="#ref-WCAG20"
   rel=biblioentry>[WCAG20]<!--{{WCAG20}}--></a> are particularly relevant.
   See that specification for more information.

  <blockquote>
   <p><a
    href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#content-structure-separation-sequence"><strong>1.3.2
    Meaningful Sequence:</strong></a> When the sequence in which content is
    presented affects its meaning, a <a
    href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#correct-reading-sequencedef">correct
    reading sequence</a> can be <a
    href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#programmaticallydetermineddef ">programmatically
    determined.</a> (Level A)
  </blockquote>

  <blockquote>
   <p><a
    href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#navigation-mechanisms-focus-order"><strong>2.4.3
    Focus Order:</strong></a> If a <a
    href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#webpagedef">Web
    page</a> can be <a
    href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#nav-seqdef">navigated
    sequentially</a> and the navigation sequences affect meaning or
    operation, focusable components receive focus in an order that preserves
    meaning and operability. (Level A)
  </blockquote>
  <!--=================================================================-->

  <h2 id=stack-of-cards-layout><span class=secno>2. </span>Stack of cards
   layout</h2>

  <p class=issue>This is a placeholder.

  <p>A stack is a layout model based on the metaphor of a stack of index
   cards: sibling elements are formatted as boxes (<dfn id=cards
   title=card>“cards”</dfn>) of the same size at the same position with a
   <dfn id=tab>tab</dfn> sticking out at one side that contains a title for
   that card. All tabs are visible (and automatically positioned so they
   overlap as little as possible), but only one box is visible at a time. In
   an interactive UA, the user can activate a card (e.g., by clicking on a
   tab, or by pressing page-down), which displays that card and hides all the
   others in the stack. E.g., a rule ‘<code class=css>display:
   stack</code>’ could make an element into a stack of cards (all children
   become cards, sized to the largest among them) and ‘<code
   class=css>display: tab</code>’ could make their descendants into titles
   for the cards. Maybe other properties determine the style of the tabs and
   on which side they display (top, bottom, left or right).
   <!--=================================================================-->

  <h2 id=declaring-templates><span class=secno>3. </span>Declaring templates</h2>

  <p>Grid templates are declared with the ‘<a
   href="#grid-template-areas"><code
   class=property>grid-template-areas</code></a>’, ‘<a
   href="#grid-template-rows"><code
   class=property>grid-template-rows</code></a>’, ‘<a
   href="#grid-template-columns"><code
   class=property>grid-template-columns</code></a>’ and ‘<a
   href="#grid"><code class=property>grid</code></a>’ properties, defined
   below.

  <p>An element that has a grid template is called a <dfn
   id=grid-element.>grid element.</dfn> More precisely: an element is a grid
   element if (1) it generates a <a href="#block-container">block
   container</a> box <a href="#ref-CSS21"
   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> and (2) at least one of ‘<a
   href="#grid-template-areas"><code
   class=property>grid-template-areas</code></a>’, ‘<a
   href="#grid-template-rows"><code
   class=property>grid-template-rows</code></a>’ or ‘<a
   href="#grid-template-columns"><code
   class=property>grid-template-columns</code></a>’ has a value other than
   the initial value.

  <p class=note>Block containers are, informally, elements that can have
   block elements as children, such as blocks, inline blocks or table cells,
   but not inline elements or replaced elements.

  <p>An element's <dfn id=grid-ancestor>grid ancestor</dfn> is the nearest
   ancestor that is a <a href="#grid-element.">grid element.</a>

  <p class=note>Note that not all elements have a grid ancestor. E.g., the
   root element has none.

  <p>The <dfn id=number-of-columns>number of columns</dfn> of a grid element
   is the number of <a href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a>
   values in ‘<a href="#grid-template-columns"><code
   class=property>grid-template-columns</code></a>’ or the number of
   columns in ‘<a href="#grid-template-areas"><code
   class=property>grid-template-areas</code></a>’, whichever is larger.

  <p>The <dfn id=number-of-rows>number of rows</dfn> is the number of <a
   href="#ltrow-heightgt"><var>&lt;row-height&gt;</var></a> values in ‘<a
   href="#grid-template-rows"><code
   class=property>grid-template-rows</code></a>’ or the number of rows in
   ‘<a href="#grid-template-areas"><code
   class=property>grid-template-areas</code></a>’, whichever is larger.

  <p class=note>Note that a grid element always has at least one row and one
   column. Those may, however, have zero size.
   <!--=================================================================-->

  <h3 id=grid-template><span class=secno>3.1. </span>Declaring a template:
   ‘<a href="#grid-template-areas"><code
   class=property>grid-template-areas</code></a>’</h3>

  <p>The ‘<a href="#grid-template-areas"><code
   class=property>grid-template-areas</code></a>’ property implicitly
   assigns a grid to an element and defines named slots in the grid. It can
   also designate a slot as the <a href="#default-slot."><em>default
   slot</em></a> for content without an explicit flow.

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=grid-template-areas>grid-template-areas</dfn>

    <tr>
     <th><a href="#values">Value</a>:

     <td>none | <a href="#ltstringgt"><var>&lt;string&gt;</var></a>+

    <tr>
     <th>Initial:

     <td>none

    <tr>
     <th>Applies to:

     <td><a href="#block-container">block container</a> elements <a
      href="#ref-CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> and <a
      href="#grid-container"><em>grid container</em></a> elements <a
      href="#ref-CSS-GRID-1"
      rel=biblioentry>[CSS-GRID-1]<!--{{!CSS-GRID-1}}--></a>

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Animatable:

     <td>no

    <tr>
     <th>Percentages:

     <td>N/A

    <tr>
     <th>Computed value:

     <td>specified value

    <tr>
     <th>Canonical order:

     <td><abbr title="follows order of property value definition">per
      grammar</abbr>
  </table>

  <p>Each string consist of one or more asterisks (“*”), identifiers,
   periods (“.”), spaces and tabs. Each string represents one row in the
   template, each symbol other than a space or tab represents one column in
   that row. Spaces and tabs have no meaning. They separate identifiers and
   may also be added for readability.

  <p>The symbols in the template have the following meaning

  <dl>
   <dt>&lt;identifier&gt;

   <dd> Named slot for content. <!--
<p class=issue>Unicode normalization is not yet
defined in css3-values nor anywhere else. E.g., we want é to match é,
no matter if the author typed U+0301 U+0065 or U+00C9.)
-->

   <dt>*

   <dd> (Asterisk.) Default slot for content (explained below).

   <dt>.

   <dd> (Period.) Blank space.
  </dl>

  <p>Multiple identical identifiers in adjacent rows or columns form a single
   <dfn id=slot>slot</dfn> that spans those rows and columns. Ditto for
   multiple “*”s. Slot names are case-sensitive, so uppercase and
   lowercase letters are considered to be different letters.

  <p class=issue>Case-sensitivity should instead be defined by reference to
   the definition of identifiers, probably in css3-values.

  <p>Non-rectangular slots and multiple slots with the same name are illegal.
   A template without any slot name or “*” is illegal. A template with
   more than one “*” slot is illegal. Strings with different numbers of
   columns (<em>before</em> padding with “.”, see the next paragraph) are
   illegal. These errors cause the declaration to be ignored.

  <p class=note>Note: <span class=index
   id=non-rectangular-and-disconnected-regions
   title="region!!non-rectangular|region!!disconnected">non-rectangular and
   disconnected regions</span> may be permitted in a future update of CSS.

  <p>If there are fewer symbols in a string than the <a
   href="#number-of-columns">number of columns</a> in the element, the string
   is implicitly padded with “.” (period) symbols. Likewise, if there are
   fewer strings than the <a href="#number-of-rows">number of rows</a> in the
   element, additional strings consisting of “.” (period) symbols are
   implicitly added.

  <p>Each slot (identifier or “*”) acts as a block element for its
   contents.

  <p>If the value is ‘<a href="#none"><code class=css>none</code></a>’,
   then no explicit slots are defined. If the element is a <a
   href="#grid-element."><em>grid element,</em></a> then the element instead
   has an <dfn id=implicit-template>implicit template</dfn> consisting of a
   single ‘<code class=css>*</code>’ slot.

  <p class=note>Note that an element is a grid element in this case if ‘<a
   href="#grid-template-columns"><code
   class=property>grid-template-columns</code></a>’ and ‘<a
   href="#grid-template-rows"><code
   class=property>grid-template-rows</code></a>’ are not both ‘<code
   class=css>auto</code>’.

  <div class=example>
   <p>For example, the following two sets of style rules are equivalent:

   <pre>DIV {
  grid-template-areas: none;
  grid-template-rows: 10em 10em 10em;
  grid-template-columns: * * * * }
</pre>

   <p>and

   <pre>DIV {
  grid-template-areas: "****" "****" "****";
  grid-template-rows: 10em 10em 10em;
  grid=columns: * * * * }
</pre>
  </div>

  <p class=note>Authors should be aware that naming slots with Hebrew or
   Arabic letters may cause some text editors to display the CSS rule with
   the slot name of the string on the right. However, the first symbol in
   each string corresponds to the first value in ‘<a
   href="#grid-template-columns"><code
   class=property>grid-template-columns</code></a>’ and thus represents the
   leftmost column in the rendering of the document.

  <div class=example>
   <p>Only a <a href="#block-container">block container</a> element can be a
    <a href="#grid-element.">grid element.</a> E.g., in the following
    document, the elements with ID “one,” “three” and “five” are
    grid elements, but the ‘<a href="#grid"><code
    class=property>grid</code></a>’ property on “two” and “four”
    has no effect.

   <pre>
&lt;html>
  &lt;style>
   #one {grid: "a b c"}
   #two {grid: "a" "b"}
   #three {display: inline-block; grid: "a b" "c d"}
   #four {grid: "a @"}
   #five {grid: "a b"}
  &lt;/style>
  &lt;table>
   &lt;tr id=four>&lt;td>... &lt;td id=five>...
  &lt;/table>
  &lt;ol>
   &lt;li id=one>
    ... &lt;span id=three>... &lt;/span>...
   &lt;li>
    ... &lt;em id=two>... &lt;/em>...
  &lt;/ol>
</pre>
  </div>
  <!--=================================================================-->

  <h3 id=grid-column-sizes><span class=secno>3.2. </span>Specifying the
   widths of columns: ‘<a href="#grid-template-columns"><code
   class=property>grid-template-columns</code></a>’</h3>

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=grid-template-columns>grid-template-columns</dfn>

    <tr>
     <th><a href="#values">Value</a>:

     <td>auto | <a href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a>+

    <tr>
     <th>Initial:

     <td>auto

    <tr>
     <th>Applies to:

     <td><a href="#block-container">block container</a> elements and <a
      href="#grid-container"><em>grid container</em></a> elements

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Animatable:

     <td>yes, between grids with the same number of tracks

    <tr>
     <th>Percentages:

     <td>N/A

    <tr>
     <th>Computed value:

     <td>specified value

    <tr>
     <th>Canonical order:

     <td><abbr title="follows order of property value definition">per
      grammar</abbr>
  </table>

  <p>The ‘<a href="#grid-template-columns"><code
   class=property>grid-template-columns</code></a>’ property specifies the
   sizes of the columns of a grid.

  <p>Where

  <pre class=prod>
<dfn id=ltcol-widthgt>&lt;col-width&gt;</dfn> = <a
   href="#ltlengthgt"><var>&lt;length&gt;</var></a> | <var>&lt;percentage&gt;</var> | * | <var>&lt;fraction&gt;</var> |
  <a
   href="#ltminmaxgt0"><var>&lt;minmax&gt;</var></a> | min-content | max-content | fit-content
<dfn
   id=ltminmaxgt>&lt;minmax&gt;</dfn> = minmax( <a
   href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a> , <a
   href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a> )</pre>

  <p class=issue>The definition of minmax isn't correct, it should only
   accepts certain values.

  <p>Each <a href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a> sets the
   width of a column, the first value for the leftmost column, the second for
   the second column, etc.

  <p>If there are fewer <a
   href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a> values than the <a
   href="#number-of-columns">number of columns</a> in the element, or if the
   value is ‘<code class=css>auto</code>’, the missing columns widths are
   all ‘<code class=css>*</code>’.

  <p>Each <a href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a> can be
   one of the following:

  <dl>
   <dt><a href="#ltlengthgt"><var>&lt;length&gt;</var></a>

   <dd> An explicit width for that column. Negative values are illegal.

   <dt><var>&lt;fraction&gt;</var>

   <dd> (A non-negative number followed by ‘<code class=css>fr</code>’.)
    A fraction of the remaining space. ‘<code class=css>1fr</code>’ means
    the same as ‘<code class=css>*</code>’

   <dt>*

   <dd> (Asterisk.) All columns with a width of ‘<code
    class=css>*</code>’ have the same width.

   <dt><var>&lt;percentage&gt;</var>

   <dd> Expresses a size as a percentage of the element's a-priori content
    width. <span class=issue>When the width of the <a
    href="#grid-element.">grid element</a> is dependent on content, the
    result is undefined.</span>

   <dt>max-content

   <dt>min-content

   <dd> The column's width is determined by its contents. See the <a
    href="#slot-sizes">algorithm</a> below.

   <dt>minmax(<var>p</var>,<var>q</var>)

   <dd> The column's width is constrained to be greater than or equal to
    <var>p</var> and less than or equal to <var>q</var>. <var>p</var> and
    <var>q</var> stand for [ <a
    href="#ltlengthgt"><var>&lt;length&gt;</var></a> | max-content |
    min-content | * ]. There may be white space around the <var>p</var> and
    <var>q</var>. If <var>q</var> &lt; <var>p</var>, then <var>q</var> is
    ignored and ‘<code
    class=css>minmax(<var>p</var>,<var>q</var>)</code>’ is treated as
    ‘<code class=css>minmax(<var>p</var>,<var>p</var>)</code>’.

   <dt>fit-content

   <dd> Equivalent to ‘<code class=css>minmax(min-content,
    max-content)</code>’.
  </dl>
  <!--=================================================================-->

  <h3 id=grid-template-row-sizes><span class=secno>3.3. </span>Specifying the
   height of rows: ‘<a href="#grid-template-rows"><code
   class=property>grid-template-rows</code></a>’</h3>

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=grid-template-rows>grid-template-rows</dfn>

    <tr>
     <th><a href="#values">Value</a>:

     <td>auto | <a href="#ltrow-heightgt"><var>&lt;row-height&gt;</var></a>+

    <tr>
     <th>Initial:

     <td>auto

    <tr>
     <th>Applies to:

     <td><a href="#block-container">block container</a> elements and <a
      href="#grid-container"><em>grid container</em></a> elements

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Animatable:

     <td>yes, between grids with the same number of tracks

    <tr>
     <th>Percentages:

     <td>N/A

    <tr>
     <th>Computed value:

     <td>specified value

    <tr>
     <th>Canonical order:

     <td><abbr title="follows order of property value definition">per
      grammar</abbr>
  </table>

  <p>The ‘<a href="#grid-template-rows"><code
   class=property>grid-template-rows</code></a>’ property specifies the
   heights of the rows of a grid.

  <pre class=prod>
<dfn id=ltrow-heightgt>&lt;row-height&gt;</dfn> = <a
   href="#ltlengthgt"><var>&lt;length&gt;</var></a> | <var>&lt;percentage&gt;</var> | * | <var>&lt;fraction&gt;</var> |
  <a
   href="#ltminmaxgt0"><var>&lt;minmax&gt;</var></a> | min-content | max-content | fit-content
<dfn
   id=ltminmaxgt0>&lt;minmax&gt;</dfn> = minmax( <a
   href="#ltrow-heightgt"><var>&lt;row-height&gt;</var></a> , <a
   href="#ltrow-heightgt"><var>&lt;row-height&gt;</var></a> )
</pre>

  <p class=issue>The definition of minmax isn't correct, it should only
   accepts certain values.

  <p class=note>Note that the syntax is the same syntax as for ‘<a
   href="#grid-template-columns"><code
   class=property>grid-template-columns</code></a>’

  <p>Each <a href="#ltrow-heightgt"><var>&lt;row-height&gt;</var></a> sets
   the height of a row, the first value for the topmost row, the second for
   the second row, etc.

  <p>If there are fewer <a
   href="#ltrow-heightgt"><var>&lt;row-height&gt;</var></a> values than the
   <a href="#number-of-rows">number of rows</a> in the element, or if the
   value is ‘<code class=css>auto</code>’, the missing row heights are
   all ‘<code class=css>fit-content</code>’.

  <p>Each <a href="#ltrow-heightgt"><var>&lt;row-height&gt;</var></a> can be
   one of the following:

  <dl>
   <dt><a href="#ltlengthgt"><var>&lt;length&gt;</var></a>

   <dd> An explicit height for that row. Negative values are illegal.

   <dt><var>&lt;fraction&gt;</var>

   <dd> (A non-negative number followed by ‘<code class=css>fr</code>’.)
    A fraction of the remaining space. ‘<code class=css>1fr</code>’ means
    the same as ‘<code class=css>*</code>’

   <dt>* (asterisk)

   <dd> All rows with a height of ‘<code class=css>*</code>’ have the
    same height.

   <dt><var>&lt;percentage&gt;</var>

   <dd> Expresses a size as a percentage of the element's a-priori content
    height.
    <p class=issue>When the height of the <a href="#grid-element.">grid
     element</a> is dependent on content, the result is undefined.

   <dt>max-content

   <dt>min-content

   <dd> The row's height is determined by its contents. See the <a
    href="#slot-sizes">algorithm</a> below.

   <dt>minmax(<var>p</var>,<var>q</var>)

   <dd> The row's height is constrained to be greater than or equal to
    <var>p</var> and less than or equal to <var>q</var>. <var>p</var> and
    <var>q</var> stand for [ <a
    href="#ltlengthgt"><var>&lt;length&gt;</var></a> | max-content |
    min-content | * ]. There may be white space around the <var>p</var> and
    <var>q</var>. If <var>q</var> &lt; <var>p</var>, then <var>q</var> is
    ignored and ‘<code
    class=css>minmax(<var>p</var>,<var>q</var>)</code>’ is treated as
    ‘<code class=css>minmax(<var>p</var>,<var>p</var>)</code>’.

   <dt>fit-content

   <dd> Equivalent to ‘<code class=css>minmax(min-content,
    max-content)</code>’.
  </dl>
  <!--=================================================================-->

  <h3 id=grid-shorthand><span class=secno>3.4. </span>The ‘<a
   href="#grid"><code class=property>grid</code></a>’ and ‘<a
   href="#grid-template0"><code class=property>grid-template</code></a>’
   shorthand properties</h3>

  <table class=propdef-extra>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=grid-template0>grid-template</dfn>

    <tr>
     <th><a href="#values">Value</a>:

     <td>none | <a href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a>* [
      [ <a href="#ltstringgt"><var>&lt;string&gt;</var></a> <a
      href="#ltrow-heightgt"><var>&lt;row-height&gt;</var></a>? ]+ | ‘<code
      class=css>/</code>’ <a
      href="#ltrow-heightgt"><var>&lt;row-height&gt;</var></a>+ ]

    <tr>
     <th>Initial:

     <td>none

    <tr>
     <th>Applies to:

     <td><a href="#block-container">block container</a> elements and <a
      href="#grid-container"><em>grid container</em></a> elements

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Animatable:

     <td>see individual properties

    <tr>
     <th>Percentages:

     <td>see individual properties

    <tr>
     <th>Computed value:

     <td>see individual properties

    <tr>
     <th>Canonical order:

     <td>N/A
  </table>

  <table class=propdef-extra>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=grid>grid</dfn>

    <tr>
     <th><a href="#values">Value</a>:

     <td><var>&lt;‘<a href="#grid-template0"><code
      class=property>grid-template</code></a>’&gt;</var> | <var>&lt;‘<a
      href="#grid-auto-flow"><code
      class=property>grid-auto-flow</code></a>’&gt;</var> [ <var>&lt;‘<a
      href="#grid-auto-columns"><code
      class=property>grid-auto-columns</code></a>’&gt;</var> [ /
      <var>&lt;‘<a href="#grid-auto-rows"><code
      class=property>grid-auto-rows</code></a>’&gt;</var> ]? ]

    <tr>
     <th>Initial:

     <td>See individual properties

    <tr>
     <th>Applies to:

     <td><a href="#block-container">block container</a> elements and <a
      href="#grid-container"><em>grid container</em></a> elements

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Animatable:

     <td>see individual properties

    <tr>
     <th>Percentages:

     <td>see individual properties

    <tr>
     <th>Computed value:

     <td>see individual properties

    <tr>
     <th>Canonical order:

     <td>N/A
  </table>

  <p>The ‘<a href="#grid-template0"><code
   class=property>grid-template</code></a>’ property is a shorthand for
   ‘<a href="#grid-template-areas"><code
   class=property>grid-template-areas</code></a>’, ‘<a
   href="#grid-template-columns"><code
   class=property>grid-template-columns</code></a>’ and ‘<a
   href="#grid-template-rows"><code
   class=property>grid-template-rows</code></a>’ and is equivalent to
   setting those properties as follows:

  <ul>
   <li>‘<a href="#grid-template-areas"><code
    class=property>grid-template-areas</code></a>’ is set to the list of <a
    href="#ltstringgt"><var>&lt;string&gt;</var></a> values. If the value
    contains a slash (“/”) instead of strings, ‘<a
    href="#grid-template-areas"><code
    class=property>grid-template-areas</code></a>’ is set to <var>n</var>
    strings of <var>m</var> asterisks (“*”) each, where <var>n</var> is
    the number of <a href="#ltrow-heightgt"><var>&lt;row-height&gt;</var></a>
    values and <var>m</var> the number of <a
    href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a> values.

   <li>‘<a href="#grid-template-rows"><code
    class=property>grid-template-rows</code></a>’ is set to the list of <a
    href="#ltrow-heightgt"><var>&lt;row-height&gt;</var></a> values, with any
    omitted ones set to ‘<code class=css>fit-content</code>’.

   <li>‘<a href="#grid-template-columns"><code
    class=property>grid-template-columns</code></a>’ is set to the list of
    <a href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a> values, or to
    ‘<code class=css>auto</code>’ if there are none.
  </ul>

  <p>The ‘<a href="#grid"><code class=property>grid</code></a>’ property
   is a shorthand for setting ‘<a href="#grid-template-areas"><code
   class=property>grid-template-areas</code></a>’, ‘<a
   href="#grid-template-rows"><code
   class=property>grid-template-rows</code></a>’, ‘<a
   href="#grid-template0"><code
   class=property>grid-template</code></a>’columns', ‘<a
   href="#grid-auto-rows"><code class=property>grid-auto-rows</code></a>’,
   ‘<a href="#grid-auto-columns"><code
   class=property>grid-auto-columns</code></a>’, and ‘<a
   href="#grid-auto-flow"><code class=property>grid-auto-flow</code></a>’
   in a single declaration. See <a href="#ref-CSS-GRID-1"
   rel=biblioentry>[CSS-GRID-1]<!--{{CSS-GRID-1}}--></a>.

  <p class=note>Note that ‘<a href="#grid-auto-rows"><code
   class=property>grid-auto-rows</code></a>’, ‘<a
   href="#grid-auto-columns"><code
   class=property>grid-auto-columns</code></a>’, and ‘<a
   href="#grid-auto-flow"><code class=property>grid-auto-flow</code></a>’
   only apply if ‘<a href="#display0"><code
   class=property>display</code></a>’ is ‘<a href="#grid"><code
   class=css>grid</code></a>’ or ‘<code class=css>inline-grid</code>’.

  <div class=example>
   <p>For example, the rule

   <pre>grid: * 10em "a b c" "a b d" 4em</pre>

   <p>is the same as

   <pre>
grid-template-columns: * 10em;
grid-template-areas: "a b c" "a b d";
grid-template-rows: auto 4em;
</pre>

   <p>… and the values for ‘<a href="#grid-auto-rows"><code
    class=property>grid-auto-rows</code></a>’, ‘<a
    href="#grid-auto-columns"><code
    class=property>grid-auto-columns</code></a>’, and ‘<a
    href="#grid-auto-flow"><code class=property>grid-auto-flow</code></a>’
    are set to their default values. (Omitted for clarity.)

   <p>Note the ‘<code class=css>auto</code>’ keyword that was implied in
    the shorthand, but must be made explicit in the ‘<a
    href="#grid-template-rows"><code
    class=property>grid-template-rows</code></a>’ property. Also note that
    the width of the third column is specified neither in the shorthand nor
    in ‘<a href="#grid-template-columns"><code
    class=property>grid-template-columns</code></a>’, which means it is
    implicitly set to ‘<code class=css>*</code>’.
  </div>

  <div class=example>
   <p>For example, the rule

   <pre>grid: * 10em / 4em 5em</pre>

   <p>is the same as

   <pre>
grid-template-columns: * 10em;
grid-template-areas: "* *" "* *";
grid-template-rows: 4em 5em;
</pre>

   <p>(And ‘<a href="#grid-auto-rows"><code
    class=property>grid-auto-rows</code></a>’, ‘<a
    href="#grid-auto-columns"><code
    class=property>grid-auto-columns</code></a>’, and ‘<a
    href="#grid-auto-flow"><code class=property>grid-auto-flow</code></a>’
    are set to their default values.)
  </div>
  <!--=================================================================-->

  <h3 id=default><span class=secno>3.5. </span>Default slots</h3>

  <p>Every <a href="#grid-element.">grid element</a> has a <dfn
   id=default-slot.>default slot.</dfn> If there is an asterisk (“*”) in
   the template, then that slot is the default. If there is no asterisk, then
   the first name in the template defines the default slot.

  <p class=note>Note that a grid always has at least one slot, see ‘<a
   href="#grid-template-areas"><code
   class=property>grid-template-areas</code></a>’.

  <div class=example>
   <p>For example, if the template is defined by ‘<code
    class=css>grid-template-areas: "..." "..c" "a b b" "a b b"</code>’,
    then “c” is the default slot.
  </div>

  <p class=note>If the grid has an <a href="#implicit-template"><em>implicit
   template</em></a> (i.e., ‘<a href="#grid-template-areas"><code
   class=property>grid-template-areas</code></a>’ is ‘<a
   href="#none"><code class=css>none</code></a>’), then its single slot is
   the default slot.

  <p>All content of a grid element that is not inside another flow (i.e., not
   inside a float, not absolutely positioned, etc.) is flowed into the
   default slot. In particular, any text content of the grid element itself
   is in that default flow.

  <div class=example>
   <p>For example, in this document fragment

   <pre>
&lt;DIV STYLE="grid: 'a b *'">
 &lt;IMG STYLE="flow: a" SRC="image.png" ALT="Foo">
 This is an
 &lt;EM STYLE="flow: *">emphasized&lt;/EM>
 &lt;EM STYLE="flow: b">(note well!)&lt;/EM>
 sentence.
 &lt;
&lt;/DIV>
</pre>

   <p>The three slots of the grid contain:

   <dl>
    <dt>Slot a

    <dd>The image

    <dt>Slot b

    <dd>The text “(note well!)”

    <dt>Default slot

    <dd>The text “This is an <em>emphasized</em> sentence.”
   </dl>

   <p>(The ‘<a href="#flow0"><code class=property>flow</code></a>’
    property is defined below.)
  </div>
  <!--=================================================================-->

  <h3 id=columns><span class=secno>3.6. </span>Interaction of ‘<a
   href="#grid"><code class=property>grid</code></a>’ and ‘<a
   href="#columns0"><code class=property>columns</code></a>’</h3>

  <p>The ‘<a href="#columns0"><code class=property>columns</code></a>’
   property of a <a href="#grid-element.">grid element</a> applies to the
   default slot of the template.

  <div class=example>
   <p>For example, with this style:

   <pre>BODY {grid: "a @ b" "c c c"; columns: 2}</pre>

   <p>The @-slot will have two columns.

   <p class=note>Note that this is the same as setting columns on the default
    slot: ‘<code class=css>BODY::slot(*) {columns: 2}</code>’ apart from
    differences in the specificity of the selector.
  </div>
  <!--=================================================================-->

  <h3 id=slot-sizes><span class=secno>3.7. </span>Calculating the size of the
   grid</h3>

  <p>For the purpose of the calculations below, each slot (identifier or
   “*”) in a grid has four dimensions associated with it, called <a
   href="#minw"><var>MINW</var></a> (“minimum width”), <a
   href="#prefw"><var>PREFW</var></a> (“preferred width”), <a
   href="#minh"><var>MINH</var></a> (“minimum height”) and <a
   href="#prefh"><var>PREFH</var></a> (“preferred height”). We can think
   of them as the minimum and preferred dimensions of the slot in isolation,
   i.e., if it wasn't constrained by other slots in the same row or column.
   They are defined as follows:

  <dl>
   <dt><dfn id=minw><var>MINW</var></dfn>

   <dd>
    <ul>
     <li>If the slot spans only columns whose width does not depend on the
      contents of the column (i.e., the column widths are specified with only
      <a href="#ltlengthgt"><var>&lt;length&gt;</var></a> values, ‘<code
      class=css>*</code>’, <var>&lt;fraction&gt;</var> values, or any
      combination of those), then <a href="#minw"><var>MINW</var></a> is
      the sum of the slot's left and right margin, border and padding (i.e.,
      any ‘<a href="#margin-left"><code
      class=property>margin-left</code></a>’, ‘<a
      href="#margin-right"><code class=property>margin-right</code></a>’,
      ‘<code class=property>padding-left</code>’ etc., that is set on it
      by means of the <span>‘<code class=css>::slot()</code>’
      pseudo-element</span>). Any ‘<code class=css>auto</code>’ margins
      are counted as 0 for this purpose. <span class=note>(Note that <a
      href="#ltlengthgt"><var>&lt;length&gt;</var></a> values can be
      specified with ‘<code class=css>calc()</code>’ as well, see
      [CSS3VALUES]].)</span>

     <li>Otherwise, if the slot is <a
      href="#vertical-element"><em>vertical,</em></a> then <a
      href="#minw"><var>MINW</var></a> is the width that the slot would have
      if its height were set to its <a
      href="#intrinsic-preferred"><em>intrinsic preferred</em></a> height <a
      href="#ref-CSS3BOX" rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a>,
      plus its left and right padding, border and margin. Any ‘<code
      class=css>auto</code>’ margins are counted as 0 for this purpose.

     <li>Otherwise, if the slot spans at least one column whose width is
      specified as ‘<code class=css>max-content</code>’ (or ‘<code
      class=css>minmax()</code>’ with a first argument of ‘<code
      class=css>max-content</code>’), then <a
      href="#minw"><var>MINW</var></a> is the <a
      href="#intrinsic-preferred"><em>intrinsic preferred</em></a> width of
      the slot plus its left and right margin, border and padding. Any
      ‘<code class=css>auto</code>’ margins are counted as 0 for this
      purpose.

     <li>Otherwise (i.e., the slot spans at least one column whose width is
      specified as ‘<code class=css>min-content</code>’ or ‘<code
      class=css>minmax()</code>’ with a first argument of ‘<code
      class=css>min-content</code>’, but no ‘<code
      class=css>max-content</code>’) <a href="#minw"><var>MINW</var></a> is
      the <a href="#intrinsic-minimum"><em>intrinsic minimum</em></a> width
      of the slot, plus its left and right padding, border and margin. Any
      ‘<code class=css>auto</code>’ margins are counted as 0 for this
      purpose.
    </ul>

   <dt><dfn id=prefw><var>PREFW</var></dfn>

   <dd>
    <ul>
     <li>If the slot spans only columns whose width does not depend on the
      contents of the column (i.e., the column widths are specified with only
      <a href="#ltlengthgt"><var>&lt;length&gt;</var></a> values, ‘<code
      class=css>*</code>’, <var>&lt;fraction&gt;</var> values, or any
      combination of those), then <a href="#prefw"><var>PREFW</var></a> is
      infinite.

     <li>Otherwise, if the slot is <a
      href="#vertical-element"><em>vertical,</em></a> then <a
      href="#prefw"><var>PREFW</var></a> is the width that the slot would
      have if its height were set to its <a
      href="#intrinsic-preferred"><em>intrinsic preferred</em></a> height,
      plus the plus its left and right padding, border and margin. Any
      ‘<code class=css>auto</code>’ margins are counted as 0 for this
      purpose.

     <li>Otherwise, if the slot spans at least one column whose width is
      specified as ‘<code class=css>max-content</code>’ (or ‘<code
      class=css>minmax()</code>’ with a first argument of ‘<code
      class=css>max-content</code>’), then <a
      href="#prefw"><var>PREFW</var></a> is the <a
      href="#intrinsic-preferred"><em>intrinsic preferred</em></a> width of
      the slot plus its left and right margin, border and padding. Any
      ‘<code class=css>auto</code>’ margins are counted as 0 for this
      purpose.

     <li>Otherwise <a href="#prefw"><var>PREFW</var></a> is the <a
      href="#intrinsic-minimum"><em>intrinsic minimum</em></a> width of the
      slot, plus its left and right padding, border and margin. Any ‘<code
      class=css>auto</code>’ margins are counted as 0 for this purpose.
    </ul>

   <dt><dfn id=minh><var>MINH</var></dfn>

   <dd>
    <ul>
     <li>If the slot spans only rows whose height does not depend on the
      contents of the column (i.e., the row heights are specified with only
      <a href="#ltlengthgt"><var>&lt;length&gt;</var></a> values, ‘<code
      class=css>*</code>’, <var>&lt;fraction&gt;</var> values, or any
      combination of those), then <a href="#minh"><var>MINH</var></a> is the
      sum of the slot's top and bottom margin, border and padding. Any
      ‘<code class=css>auto</code>’ margins are counted as 0 for this
      purpose.

     <li>Otherwise, if the slot is <a
      href="#horizontal-element."><em>horizontal,</em></a> then <a
      href="#minh"><var>MINH</var></a> is the height the slot would have if
      its width were set to its <a href="#intrinsic-preferred"><em>intrinsic
      preferred</em></a> width, plus its top and bottom margin, border and
      padding. Any ‘<code class=css>auto</code>’ margins are counted as 0
      for this purpose.

     <li>Otherwise, if the slot spans at least one row whose height is
      specified as ‘<code class=css>max-content</code>’ (or ‘<code
      class=css>minmax()</code>’ with a first argument of ‘<code
      class=css>max-content</code>’), then <a
      href="#minh"><var>MINH</var></a> is the <a
      href="#intrinsic-preferred"><em>intrinsic preferred</em></a> height of
      the slot plus its top and bottom margin, border and padding. Any
      ‘<code class=css>auto</code>’ margins are counted as 0 for this
      purpose.

     <li>Otherwise <a href="#minh"><var>MINH</var></a> is the <a
      href="#intrinsic-minimum"><em>intrinsic minimum</em></a> height of the
      slot, plus its top and bottom padding, border and margin. Any ‘<code
      class=css>auto</code>’ margins are counted as 0 for this purpose.
    </ul>

   <dt><dfn id=prefh><var>PREFH</var></dfn>

   <dd>
    <ul>
     <li>If the slot spans only rows whose height does not depend on the
      contents of the column (i.e., the row heights are specified with only
      <a href="#ltlengthgt"><var>&lt;length&gt;</var></a> values, ‘<code
      class=css>*</code>’, <var>&lt;fraction&gt;</var> values, or any
      combination of those), then <a href="#prefh"><var>PREFH</var></a> is
      infinite.

     <li>Otherwise, if the slot is <a
      href="#horizontal-element."><em>horizontal,</em></a> then <a
      href="#prefh"><var>PREFH</var></a> is the height the slot would have if
      its width were set to its <em>preferred minimum</em> width, plus its
      top and bottom padding, border and margin. Any ‘<code
      class=css>auto</code>’ margins are counted as 0 for this purpose.

     <li>Otherwise, if the slot spans at least one row whose height is
      specified as ‘<code class=css>max-content</code>’ (or ‘<code
      class=css>minmax()</code>’ with a first argument of ‘<code
      class=css>max-content</code>’), then <a
      href="#prefh"><var>PREFH</var></a> is the <a
      href="#intrinsic-preferred"><em>intrinsic preferred</em></a> height of
      the slot plus its top and bottom margin, border and padding. Any
      ‘<code class=css>auto</code>’ margins are counted as 0 for this
      purpose.

     <li>Otherwise <a href="#prefh"><var>PREFH</var></a> is the <a
      href="#intrinsic-preferred"><em>intrinsic preferred</em></a> height of
      the slot, plus its top and bottom padding, border and margin. Any
      ‘<code class=css>auto</code>’ margins are counted as 0 for this
      purpose.
    </ul>
  </dl>

  <div class=example>
   <p>For example, the <a href="#minw"><var>MINW</var></a> values of the
    slots in this grid

   <pre>
grid:  auto * 10em
      "  a  a  .  "
      "  b  .  c  "
</pre>

   <p>are as follows:

   <dl>
    <dt>a

    <dd> ‘<code class=css>min-content</code>’ (because the slot spans at
     least one column with a width specified as ‘<code
     class=css>min-content</code>’ or ‘<code class=css>auto</code>’).

    <dt>b

    <dd> ‘<code class=css>min-content</code>’ (ditto).

    <dt>c

    <dd> 0 (because the slot spans only columns with a width that is
     independent of the content).
   </dl>
  </div>

  <p>The UA must choose the widths and heights of all columns and rows such
   that the following constraints are satisfied.

  <ol><!-- Constraints relating to the element's own width and
   height. These constraints may be dropped if overconstrained -->

   <li>
    <p>If the element has an a-priori known content height, then the sum of
     the heights of all rows must be equal to the element's height.

    <div class=example>
     <p>For example, the two rows in this grid must be 8em each so that the
      total height matches the height of the element:

     <pre>
div {
  height: 16em;
  grid: "a . b"  *
        "a c ."  *
</pre>
    </div>

   <li>
    <p>If the grid element has an a-priori known content width, then the sum
     of the widths of all columns must be equal to the element's width.

    <div class=example>
     <p>For example, the three columns in this grid must be 20em each:

     <pre>div {width: 60em; grid: "a b c"}</pre>
    </div>
    <!-- Constraints relating to fixed-size rows and columns -->

   <li>Each row with a height specified as a <a
    href="#ltlengthgt"><var>&lt;length&gt;</var></a> must have exactly that
    height.

   <li>Each column with a width specified as a <a
    href="#ltlengthgt"><var>&lt;length&gt;</var></a> must have exactly that
    width. <!-- Constraints on rows and column with fractional sizes. -->

   <li>All rows with a height specified as ‘<code class=css>*</code>’
    must have the same height.
    <p class=issue>If we have both ‘<code class=css>*</code>’ and
     ‘<code class=css>fr</code>’, then ‘<code class=css>*</code>’
     will be defined as ‘<code class=css>1fr</code>’ and we can drop this
     rule and the next. Otherwise either these two rules or the next two must
     be removed.

   <li>All columns with a width specified as ‘<code class=css>*</code>’
    must have the same width.

   <li>For any pair (<var>i</var>,<var>j</var>) of rows whose <a
    href="#ltrow-heightgt"><var>&lt;row-height&gt;</var></a> values
    h<sub>i</sub> and h<sub>j</sub> are both specified in ‘<code
    class=css>fr</code>’, the computed heights H<sub>i</sub> and
    H<sub>j</sub> must be such that H<sub>i</sub> * h<sub>j</sub> =
    H<sub>j</sub> * h<sub>i</sub>. (I.e., their heights are proportional to
    their number of ‘<code class=css>fr</code>’ units.)

   <li>For any pair (<var>i</var>,<var>j</var>) of columns whose <a
    href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a> values
    w<sub>i</sub> and w<sub>j</sub> are both specified in ‘<code
    class=css>fr</code>’, the computed width W<sub>i</sub> and
    W<sub>j</sub> must be such that W<sub>i</sub> * w<sub>j</sub> =
    W<sub>j</sub> * W<sub>i</sub>. (I.e., their widths are proportional to
    their number of ‘<code class=css>fr</code>’ units.)
    <!-- Constraints relating to rows and columns without slots that span
   into other rows or columns, i.e., cases where the size of a slot
   can put an upper limits on the size of a row or column -->

   <li>
    <p>Each row that contains slots that span only one row and no slots that
     span more than one row, must not be higher than the largest <a
     href="#prefh"><var>PREFH</var></a> of all slots in the row plus the
     amount needed to <a class=index href="#vertical-align"
     id=vertically-align title=vertical-align>vertically align</a> the <a
     href="#horizontal-element.">horizontal</a> slots that have a ‘<a
     href="#vertical-align"><code class=property>vertical-align</code></a>’
     of ‘<code class=css>baseline</code>’.

    <div class=example>
     <p>For example, the second row in this grid

     <pre>
grid: "a . c . ."  5em
      ". . . . b"  auto
</pre>

     <p>must not be taller than the height (<span>block dimension</span>) of
      slot b. The first row contains a slot that spans two rows (slot a), so
      this rule does not apply to that row.
    </div>

   <li>
    <p>Each column that contains slots that span only one column and no slots
     that span more than one column, must not be wider than the largest <a
     href="#prefw"><var>PREFW</var></a> of all slots in the column plus the
     amount needed to align the <a href="#vertical-element">vertical</a>
     slots that have a ‘<a href="#vertical-align"><code
     class=property>vertical-align</code></a>’ of ‘<code
     class=css>baseline</code>’.

    <div class=example>
     <p>For example, in this grid

     <pre>
grid: "a c"
      "a b"
      auto *
</pre>

     <p>the first column must not be wider than the <a
      href="#prefw"><var>PREFW</var></a> of slot a. Both slots in the second
      column have an infinite <a href="#prefw"><var>PREFW</var></a>, so this
      rule effectively puts no constraint on that column.
    </div>
    <!-- Constraints on slots, only to set lower limits.  -->

   <li>Each slot must be at least as wide as its <a
    href="#minw"><var>MINW</var></a>.

   <li>Each slot must be at least as high as its <a
    href="#minh"><var>MINH</var></a>.
  </ol>

  <p>If it is impossible to choose such widths and heights, then try without
   constraint 1. If it is still impossible, try without constraint 2 instead.
   And, finally, try with both 1 and 2 dropped.

  <div class=example>
   <p>For example, the sum of the row heights in this example can never be
    the same as the height of the element:

   <pre>
div {
  height: 20em;
  grid: "a b c"  7em
        "a . c"  7em }
</pre>

   <p>The first constraint is therefore ignored, the rows are 7em each and
    6em of space below the grid remains empty.
  </div>

  <p>If there are multiple solutions, and constraint 1 was dropped or did not
   apply, then the sizes must additionally be chosen such that the sum of the
   heights of the rows is minimized.

  <p>If there are still multiple solutions, and constraint 2 was dropped or
   did not apply, then the sizes must additionally be chosen such that the
   sum of the widths of the columns is minimized.

  <p class=note>The calculation is intended to be symmetric in width and
   height (except for the case when both width and height are fixed and the
   grid is over-constrained, when a solution that ignores the height is tried
   before trying one that ignores the width).

  <div class=example>
   <p>For example, there would be multiple solutions for this grid:

   <pre>
&lt;DIV STYLE="float: left; grid: 'a . b'">
 &lt;P STYLE="flow: a">Two words
 &lt;P STYLE="flow: b">Only three words
&lt;/DIV>
</pre>

   <p>The columns must have equal width, but there is no other constraint on
    the width. They could be narrow:

   <blockquote>
    <p><code class=visible style="display: inline-block">Two  <br>
     words<br>
          </code><code class=visible
     style="display: inline-block">     <br>
          <br>
          </code><code class=visible
     style="display: inline-block">Only <br>
     three<br>
     words</code>
   </blockquote>

   <p>or wider:

   <blockquote>
    <p><code class=visible
     style="display: inline-block">Two words       </code><code
     class=visible
     style="display: inline-block">                </code><code
     class=visible style="display: inline-block">Only three words</code>
   </blockquote>

   <p>or even wider still, e.g.:

   <blockquote>
    <p><code class=visible
     style="display: inline-block">Two words          </code><code
     class=visible
     style="display: inline-block">                   </code><code
     class=visible
     style="display: inline-block">Only three words   </code>
   </blockquote>

   <p>The rule to minimize height excludes the first, narrow solution. The
    rule to minimize width excludes the third and all wider solutions. So the
    second layout, the narrowest that has all words on one line, is the
    correct one.

   <p>(This example assumes the width of the floating DIV's containing block
    is large enough. The default width of a float is actually ‘<code
    class=css>fit-content</code>’, and thus if the containing block is too
    narrow, the result will be narrower, too, because the calculation will
    have to be redone using that width as the a-priori width for the DIV.)
  </div>

  <p class=note>The width isn't known a-priori, if, e.g., ‘<a
   href="#width"><code class=property>width</code></a>’ is ‘<code
   class=css>auto</code>’ and the element is floating, absolutely
   positioned, inline-block or a child of a block with vertical writing mode.

  <p>An extra step may be necessary in paged media if a page break occurs
   inside a template (only in the case of an <a
   href="#element-based-template."><em>element-based template</em></a> see <a
   href="#page-break">below</a>). If the template, after computing the width
   and height, is too big to fit on the current page, and if a suitable break
   point exists, the part of the template after that break point is put on
   the next page. The width of the <span class=index
   id=containing-block>containing block</span> on that page may be different
   if that page has different margins from the current page (see <a
   href="#ref-CSS3PAGE" rel=biblioentry>[CSS3PAGE]<!--{{!CSS3PAGE}}--></a>)
   and thus the width and height of that part of the template must be
   recalculated in the new context.

  <p class=note>Note that the widths of the columns can be completely
   determined before laying out any of the contents as long as there are no
   columns with a <a href="#ltcol-widthgt"><var>&lt;col-width&gt;</var></a>
   of ‘<code class=css>min-content</code>’ or ‘<code
   class=css>max-content</code>’.

  <p class=issue>Do we define restrictions or approximations for slots that
   are part of a <a href="#chain."><em>chain</em></a> to avoid complicated
   optimization algorithms?

  <p class=note>Note: In a future update of CSS, rows might get a property to
   specify how the height of that row is adjusted in case the above
   calculation yields a template that is less tall than the element itself.

  <p>The height of a slot is measured as if the slot had one <dfn
   id=anonymous-block title="anonymous block of a slot">anonymous block</dfn>
   as a child that contains all the slot's contents and the anonymous block
   is a <em>flow root</em> (see <a href="#ref-CSS3BOX"
   rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a>).

  <div class=example>
   <p>This example divides the window in three rows and three columns,
    separated by 1em of white space. The middle row and the middle column are
    flexible, the others are fixed at a specific size. The first column is
    5em wide, the last one 10em.

   <pre>
&lt;style type="text/css"&gt;
  body {
    height: 100%;
    grid: 5em 1em  *  1em 10em
          "a   .   b   .   c"  2em
          ".   .   .   .   ."  1em
          "d   .   e   .   f"
          ".   .   .   .   ."  1em
          "g   .   h   .   i"  2em}
  #logo {flow: a}
  #motto {flow: b}
  #date {flow: c}
  #main {flow: e}
  #adv {flow: f}
  #copy {flow: g}
  #about {flow: h}
&lt;/style&gt;
&lt;p id=logo&gt;&lt;img src=...
&lt;p id=motto&gt;Making Web pages since 1862
&lt;p id=date&gt;August 2, 2004
...
</pre>
  </div>

  <p class=issue>[Add example with three columns, first two as narrow as
   possible, third one taking up all remaining space.]
   <!--=================================================================-->

  <h2 id=flow><span class=secno>4. </span>Flowing content into slots: ‘<a
   href="#flow0"><code class=property>flow</code></a>’</h2>

  <p>The ‘<a href="#flow0"><code class=property>flow</code></a>’ property
   adds an element to a slot.

  <table class=propdef>
   <tbody>
    <tr>
     <th>Name:

     <td><dfn id=flow0>flow</dfn>

    <tr>
     <th><a href="#values">Value</a>:

     <td>auto | <var>&lt;identifier&gt;</var> | <a
      href="#ltstringgt"><var>&lt;string&gt;</var></a> | ‘<code
      class=css>*</code>’ | same

    <tr>
     <th>Initial:

     <td>auto

    <tr>
     <th>Applies to:

     <td>elements that have a <a href="#grid-ancestor">grid ancestor</a> and
      whose ‘<a href="#position"><code
      class=property>position</code></a>’ is ‘<code
      class=css>static</code>’ or ‘<code class=css>relative</code>’

    <tr>
     <th>Inherited:

     <td>no

    <tr>
     <th>Animatable:

     <td>no

    <tr>
     <th>Percentages:

     <td>N/A

    <tr>
     <th>Computed value:

     <td>specified value

    <tr>
     <th>Canonical order:

     <td><abbr title="follows order of property value definition">per
      grammar</abbr>
  </table>

  <p>If the value is not ‘<code class=css>auto</code>’, the element is
   added to the flow of the given slot, instead of to the flow of its parent.

  <p class=note>Note that the content of a slot depends on its ‘<a
   href="#content1"><code class=property>content</code></a>’ property.
   Content flowed into the slot is thus not necessarily rendered. See <a
   href="#content">“Slots and the ‘<code class=property>content</code>’
   property.”</a>

  <p>The name of the slot may be quoted (<a
   href="#ltstringgt"><var>&lt;string&gt;</var></a>) or unquoted
   (<var>&lt;identifier&gt;</var>), but if the name is equal to one of the
   following, it <em>must</em> be quoted: ‘<a href="#initial"><code
   class=css>initial</code></a>’, ‘<a href="#inherit"><code
   class=css>inherit</code></a>’, ‘<code class=css>default</code>’ or
   ‘<code class=css>same</code>’. This is to avoid ambiguity with the
   keywords of the same name.

  <div class=example>
   <p>For example, the following two style sheets are the same:

   <pre>
div {grid: "p1 p2"}
h2 {flow: p1}
</pre>

   <p>and

   <pre>
div {grid: "p1 p2"}
h2 {flow: "p1"}
</pre>

   <p>But the following two are not:

   <pre>
div {grid: "initial final"}
h2 {flow: "initial"}
</pre>

   <p>and

   <pre>
div {grid: "initial final"}
h2 {flow: initial}
</pre>

   <p>The last ‘<a href="#initial"><code class=css>initial</code></a>’ is
    interpreted as a reserved keyword and not as the name of the first slot
    in the grid.
  </div>

  <p>If the element has no <a href="#grid-ancestor">grid ancestor</a>, or
   that grid ancestor has no slot of the given name, the property is treated
   as if it were ‘<code class=css>auto</code>’.

  <p>A value of ‘<code class=css>same</code>’ means the element is put
   into the same slot as the nearest preceding element in document order that
   (1) has the same <a href="#grid-ancestor">grid ancestor</a>, (2) to which
   the ‘<a href="#flow0"><code class=property>flow</code></a>’ property
   applies and (3) whose ‘<a href="#flow0"><code
   class=property>flow</code></a>’ property is not ‘<code
   class=css>auto</code>’.

  <div class=issue id=non-existent-slot>
   <p>If the name refers to a slot that doesn't exist in the element's <a
    href="#grid-ancestor"><em>grid ancestor</em></a> (or there is no grid
    ancestor) there are several possibilities:

   <ol>
    <li>The element is not positioned (i.e., it is positioned in the current
     flow).

    <li>The letter is looked for in the grid ancestor's own grid ancestor,
     etc., recursively. If no slot of that name is found in any of them, then
     the element is not positioned.

    <li>The element is positioned in the default slot (i.e., as if ‘<a
     href="#flow0"><code class=css>flow: *</code></a>’ had been specified);
     or not positioned at all, in case there is no grid ancestor.

    <li>The name is looked for in the grid ancestor's own grid ancestor,
     etc., recursively. If no slot of that name is found in any of them, then
     the element is positioned in the default slot.
   </ol>
  </div>

  <p>All content flowed into the same slot, whether explicitly with ‘<a
   href="#flow0"><code class=property>flow</code></a>’ or implicitly by
   flowing into the default slot, forms a single flow, with content in
   document order. The slot establishes a block formatting context and
   becomes the <em class=index id=containing-block0>containing block</em> of
   the resulting content flow. The boxes of elements flowed into the same
   slot explicitly (by means of ‘<a href="#flow0"><code
   class=property>flow</code></a>’) are each other's siblings in the slot.

  <div class=example>
   <p>For example, the style sheet

   <pre>
BODY {grid: "a ." ". b"}
.paris {flow: a}
.london {flow: b}
</pre>

   <p>with this document

   <pre>
&lt;DIV CLASS=london>
 &lt;P>The...
 &lt;DIV CLASS=paris>
  &lt;P>The...
  &lt;DIV CLASS=london>
   &lt;P>The...
  &lt;/DIV>
 &lt;/DIV>
&lt;/DIV>
</pre>

   <p>causes the second and third DIVs to be taken out of their parents. The
    second DIV becomes the first child of slot a (i.e., of the pseudo-element
    called ‘<code class=css>::slot(a)</code>’). The third DIV becomes the
    sibling of the first DIV, because both are added to slot b independently.
  </div>

  <div class=example>
   <p>Here is another example. In this document

   <pre>
&lt;P STYLE="grid: 'a b'">
 &lt;SPAN STYLE="flow: a">First text &lt;SPAN
  STYLE="flow: a">Second text&lt;/SPAN> Third
  text&lt;/SPAN>
 &lt;SPAN STYLE="flow: b">Fourth text &lt;SPAN
  STYLE="flow: auto">Fifth text&lt;/SPAN> Sixth
  text&lt;/SPAN>
&lt;/P>
</pre>

   <p>the second SPAN has a non-auto ‘<a href="#flow0"><code
    class=property>flow</code></a>’ and is thus taken out of its parent's
    flow and added at the end of slot ‘<code class=css>a</code>’. As a
    result, slot ‘<code class=css>a</code>’ contains text in this order:
    “First text Third Text Second text.” This is in contrast to the
    fourth SPAN, which has ‘<code class=css>flow: auto</code>’ and thus
    remains inside its parent's flow. Slot ‘<code class=css>b</code>’ has
    this text: “Fourth text Fifth text Sixth text.”
  </div>

  <p>The content flowed into a slot does not inherit properties from the
   slot.

  <p class=note>Note that ‘<a href="#flow0"><code
   class=property>flow</code></a>’ applies to floating elements: they are
   floated relative to their <span class=index
   id=containing-block1>containing block,</span> and if their ‘<a
   href="#flow0"><code class=property>flow</code></a>’ property indicates a
   slot in a grid, that slot is their containing block. See also <a
   href="#float">“Floating elements inside templates”</a> below.

  <div class=example>
   <p>A common markup in HTML for illustrations with captions is as follows:

   <pre>
&lt;div class=figure>
 &lt;p>&lt;img src="paul.jpg" alt="...">
 &lt;p class=caption>A pond in a playground in Amsterdam
&lt;/div>
</pre>

   <p>The caption can be put above the image by using a template as follows:

   <pre>
div.figure {grid: * min-content *
                  "a a a"
                  ". b ."}

div.figure p {flow: b}
div.figure p.caption {flow: a; text-align: center}
</pre>

   <p>The caption can be wider than the image and the image will be centered.

   <p>When the figure is floating, it is probably better to not let the
    caption become wider than the image (unless the caption cannot be made
    narrow enough):

   <pre>
div.figure {float: right; grid: "a" "b" min-content}
div.figure p {flow: b}
div.figure p.caption {flow: a; text-align: center}
</pre>
  </div>

  <div class=example>
   <p>In this example, a form is laid out on a grid, with two labels and two
    input boxes and a submit and a reset button:

   <pre>
form {
  border: thin solid;
  grid: "a a a a . b b b b"
        ". . . . . . . . ." 1em
        "c c c c . d d d d"
        ". . . . . . . . ." 1em
        ". . . e e . . f f" }
label[for=minv] { flow: a }
input#minv { flow: b; display: block }
label[for=maxv] { flow: c }
input#maxv { flow: d; display: block }
input[type=submit] { flow: e; display: block }
input[type=reset] { flow: f; display: block }
</pre>

   <p>Here is the fragment of HTML that the style is applied to:

   <pre>
&lt;form action="./"&gt;
  &lt;label for=minv&gt;Enter minimum value:&lt;/label&gt;
  &lt;input id=minv name=minv&gt;
  &lt;label for=maxv&gt;Enter maximum value:&lt;/label&gt;
  &lt;input id=maxv name=maxv&gt;
  &lt;input type=submit value="OK"&gt;
  &lt;input type=reset value="Reset"&gt;
&lt;/form&gt;
</pre>

   <p>The addition of ‘<code class=css>display: block</code>’ causes the
    form controls to use the width computation of blocks, in other words:
    they will be as wide as their containing block, which in this case means
    that they will be as wide as the slot they are assigned to. Without it,
    they would be inline elements and just be left-aligned in their slots.

   <div class=figure>
    <p><img alt="Image simulating the layout of the example"
     longdesc=form.desc src=form.png>

    <p class=caption>Possible rendering of the example.
   </div>
  </div>

  <div class=example>
   <p>This example shows that templates can be nested. The body has two
    columns. The #content element that goes into the second column has itself
    another template, into which the various “modules” are placed.

   <div class=figure>
    <p><img alt="[Screendump with nested templates]" longdesc=table5.desc
     src=table5.png>

    <p class=caption>Possible rendering of the nested templates. (The borders
     are added for clarity, they don't occur in the style rules below. The
     red border is the inner template.)
   </div>

   <p>For clarity, the inner template uses different letters for the slots
    than the outer template. This is not required.

   <pre>
&lt;style type="text/css">
body {
     grid: 10em *
           "a   b";
}
#nav {
     flow: a;
}
#content {
     flow: b;
     grid:  *  1em  *  1em  *
           "c   .   d   .   e"
           ".   .   .   .   ." 1em
           ".   .   f   .   .";
}
.module.news {
     flow: c;
}
.module.sports {
     flow: d;
}
.module.personal {
     flow: e;
}
#foot {
     flow: f;
}
&lt;/style>
&lt;body>
&lt;ul id="nav">
     &lt;li>navigation&lt;/li>
&lt;/ul>
&lt;div id="content">
    &lt;div class="module news">
         &lt;h3>Weather&lt;/h3>
         &lt;p>There will be weather&lt;/p>
    &lt;/div>
    &lt;div class="module sports">
         &lt;h3>Football&lt;/h3>
         &lt;p>People like football.&lt;/p>
    &lt;/div>
    &lt;div class="module sports">
         &lt;h3>Chess&lt;/h3>
         &lt;p>There was a brawl at the chess tournament&lt;/p>
    &lt;/div>
    &lt;div class="module personal">
         &lt;h3>Your Horoscope&lt;/h3>
         &lt;p>You're going to die (eventually).&lt;/p>
    &lt;/div>
    &lt;p id="foot">Copyright some folks&lt;/p>
&lt;/div>

&lt;/body>
</pre>
  </div>

  <div class=example>
   <p>This example shows the use of ‘<code class=css>same</code>’ to put
    <code>DD</code> elements in the same slot as the preceding
    <code>DT</code>.

   <pre>
...
DL {grid: * 2em * 2em * "a . b . c"}
DT.mineral {flow: a}
DT.animal {flow: b}
DT.plant {flow: c}
DD {flow: same; margin-left: 1em}
...
<b>&lt;DL></b>
 <b>&lt;DT class=animal></b>falcon
 <b>&lt;DD></b>This bird of prey...
 <b>&lt;DT class=animal></b>rabbit
 <b>&lt;DD></b>Local restaurants...
 <b>&lt;DT class=mineral></b>granite
 <b>&lt;DD></b>This rock occurs...
 <b>&lt;DT class=plant></b>olive
 <b>&lt;DD></b>The fruit of...
 <b>&lt;DT class=mineral></b>limestone
 <b>&lt;DD></b>A rock composed of...
 <b>&lt;DT class=plant></b>pine
 <b>&lt;DD></b>The western half...
<b>&lt;/DL></b>
</pre>

   <div class=figure>
    <p><img alt=screendump longdesc=granite.desc src=granite.png>

    <p class=caption>Possible rendering of the <code>DL</code> list, with
     items sorted into three columns.
   </div>
  </div>

  <p class=issue>An alternative to ‘<code class=css>same</code>’ may be
   to create selectors with regular-expression-like capabilities: ‘<code
   class=css>DT.plant + DD* + DD {flow: c}</code>’ selects a DD that
   follows zero or more DDs that follow DT.plant.

  <p class=issue>Does a percentage ‘<a href="#height"><code
   class=property>height</code></a>’ work on an element that is flowed into
   a slot? If the grid template assigns a fixed height to the slot, it is
   obvious what a percentage means, but if the slot's height is ‘<code
   class=css>max-content</code>’ and an element in the slot has ‘<code
   class=css>height: 110%</code>’, there is a conflict…

  <div class=issue>
   <p>Allowing multiple values on ‘<a href="#flow0"><code
    class=property>flow</code></a>’ could be an easy way to duplicate
    elements. E.g., this style

   <pre>
BODY {grid: "a . b . c ."}
H1 {flow: a, b, c}
#art1 {flow: a}
#art2 {flow: b}
#art3 {flow: c}
</pre>

   <p>with a document like

   <pre>
...
&lt;H1>Local news&lt;/H1>
&lt;DIV ID=art1>...&lt;/DIV>
&lt;DIV ID=art2>...&lt;/DIV>
&lt;DIV ID=art3>...&lt;/DIV>
</pre>

   <p>would repeat the H1 at the top of all three columns. With <a
    href="#region-based-styling"><em>region-based styling,</em></a> the three
    instances could even be styled differently, e.g., with generated content:
    ‘<code class=css>@region ::slot(b) { H1::before {content: "cont'd "}
    }</code>’
  </div>

  <p class=issue><a
   href="http://www.w3.org/Style/CSS/Tracker/issues/201">ISSUE-201:</a> Terra
   Informatica's <a
   href="http://www.terrainformatica.com/htmlayout/">HTMLayout</a> program
   proposes an interesting shortcut: if a slot's name is a number (instead of
   an identifier), it refers directly to the child with that number. That
   child is positioned in that slot and doesn't need ‘<a
   href="#flow0"><code class=property>flow</code></a>’ to be set. See <a
   href="http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm">the
   documentation by Andrew Fedoniouk and Ivan Goroun.</a> E.g., <code>&lt;ul
   style="grid: '2 1'">&lt;li>one &lt;li>two &lt;/ul></code> puts “two”
   on the left and “one” on the right. It is thus also a shortcut for
   some applications Flexbox's of <a
   href="https://www.w3.org/TR/css3-flexbox/#order-property">‘<code
   class=property>order</code>’ property.</a>
   <!--=================================================================-->

  <h2 id=absolute><span class=secno>5. </span>Comparison with ‘<code
   class=css>display: grid</code>’ and ‘<code class=css>display:
   inline-grid</code>’</h2>

  <p><em>This section is not normative</em>

  <p>The ‘<a href="#grid"><code class=css>grid</code></a>’ and ‘<code
   class=css>inline-grid</code>’ values of the ‘<a href="#display0"><code
   class=property>display</code></a>’ property make an element into a <a
   href="#grid-container"><em>grid container,</em></a> (see <a
   href="#ref-CSS-GRID-1"
   rel=biblioentry>[CSS-GRID-1]<!--{{!CSS-GRID-1}}--></a>), which is an
   element that uses the ‘<a href="#grid"><code
   class=property>grid</code></a>’ properties to define a grid, just like a
   <a href="#grid-element."><em>grid element,</em></a> but its children ignore
   the ‘<a href="#flow0"><code class=property>flow</code></a>’ property
   and are instead automatically made into separate flows and positioned in
   subsequent slots of the grid. (Although there are also properties to set
   their positions explicitly.)

  <p>‘<a href="#grid"><code class=css>Grid</code></a>’ and ‘<code
   class=css>inline-grid</code>’ also cause the template to grow
   automatically with either extra rows or extra columns, if there are more
   children than predefined slots.

  <p>Note that the template of a grid container is also mirrored and/or
   rotated depending on the ‘<a href="#writing-mode"><code
   class=property>writing-mode</code></a>’ and ‘<a
   href="#direction"><code class=property>direction</code></a>’ of the grid
   container, unlike the template of a grid element.
   <!--=================================================================-->

  <h2 id=styling-slots><span class=secno>6. </span>Styling slots</h2>

  <p>Slots have certain properties of their own, as defined below. If those
   properties are inherited, they inherit from the <a
   href="#grid-element.">grid element.</a> To set properties on the slots,
   two kinds of selectors are available: ‘<code
   class=css>::slot()</code>’ and ‘<code class=css>::blank()</code>’.

  <h3 id=slot-pseudo><span class=secno>6.1. </span>The ‘<code
   class=css>::slot()</code>’ pseudo-element</h3>

  <p>The slots of a <a href="#grid-element."><em>grid element</em></a> can be
   individually addressed with the <dfn id=slot-pseudo-element.
   title="slot!!pseudo-element">‘<code class=css>slot()</code>’
   pseudo-element.</dfn>

  <div class=example>
   <p>For example, the following sets the background and vertical alignment
    of some of the slots in a template:

   <pre>
body { grid: "a a a"
             "b c d" }
body::slot(b) { background: #FF0 }
body::slot(c), body::slot(d) { vertical-align: bottom }
</pre>
  </div>

  <p>Only the following properties apply to the ‘<code
   class=css>slot()</code>’ pseudo-element.

  <ul>
   <li>background properties

   <li>‘<a href="#box-shadow"><code class=property>box-shadow</code></a>’

   <li>‘<a href="#vertical-align"><code
    class=property>vertical-align</code></a>’ (see <a
    href="#vertical-alignment">“vertical alignment”</a> below)

   <li>‘<a href="#overflow"><code class=property>overflow</code></a>’
    (see the sections on <a href="#vertical-alignment">vertical alignment</a>
    and <a href="#paged">paged media</a> below)

   <li>‘<a href="#writing-mode"><code
    class=property>writing-mode</code></a>’

   <li>‘<a href="#direction"><code class=property>direction</code></a>’

   <li>‘<a href="#box-shadow"><code class=property>box-shadow</code></a>’

   <li>border properties

   <li>padding properties

   <li>margin properties

   <li>outline properties

   <li>‘<a href="#box-decoration-break"><code
    class=property>box-decoration-break</code></a>’

   <li>column properties

   <li>‘<a href="#z-index"><code class=property>z-index</code></a>’ (see
    <a href="#stacking-order">“Stacking order”</a> below)

   <li>‘<code class=property>opacity</code>’

   <li>transform properties

   <li>mask properties

   <li>‘<code class=property>filter</code>’

   <li>‘<a href="#content1"><code class=property>content</code></a>’ (see
    <a href="#content">“Slots and the ‘<code
    class=property>content</code>’ property”</a> below)
  </ul>

  <p>The following properties also apply to ‘<code
   class=css>::slot()</code>’ pseudo elements, but only affect content
   inserted with the ‘<a href="#content1"><code
   class=property>content</code></a>’ property other than what corresponds
   to the ‘<a href="#contents0"><code class=css>contents</code></a>’
   keyword. (I.e., not to the content that is flowed into the slot via the
   ‘<a href="#flow0"><code class=property>flow</code></a>’ property or
   because the slot is the <a href="#default-slot.">default slot.</a> See <a
   href="#region-based">“Styling the contents of slots”</a> for how to
   style that part of the content.)

  <ul>
   <li>‘<code class=property>color</code>’

   <li>font properties

   <li>‘<code class=property>text-decoration</code>’

   <li>‘<code class=property>text-transform</code>’

   <li>counter properties <span class=issue>not needed?</span>

   <li>‘<code class=property>image-orientation</code>’

   <li>‘<code class=property>image-resolution</code>’

   <li>‘<code class=property>letter-spacing</code>’

   <li>‘<code class=property>object-fit</code>’

   <li>‘<code class=property>object-position</code>’

   <li>‘<code class=property>text-align</code>’

   <li>‘<code class=property>text-align-last</code>’

   <li>‘<code class=property>text-indent</code>’

   <li>‘<code class=property>visibility</code>’

   <li>‘<code class=property>white-space</code>’

   <li>‘<a href="#word-spacing"><code
    class=property>word-spacing</code></a>’
  </ul>

  <p class=issue><a
   href="http://www.w3.org/Style/CSS/Tracker/issues/37">ISSUE-37:</a> Can a
   slot have a border and if so, where is it drawn?

  <p>The background of a slot is drawn immediately on top of the background
   of the element itself. E.g., the background set on ‘<code
   class=css>P::slot(a)</code>’ is immediately in front of the background
   set on ‘<code class=css>P</code>’.

  <p>Margins on slots do not collapse, neither with other slots, nor with
   elements inside the slot.
   <!--=================================================================-->

  <h3 id=the-blank-pseudo-element><span class=secno>6.2. </span>The ‘<code
   class=css>::blank()</code>’ pseudo-element</h3>

  <p class=issue>The naming/syntax is an issue, because there is a ‘<code
   class=css>:blank</code>’ pseudo-<strong>class</strong> in <a
   href="#ref-CSS3PAGE" rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a> and
   a ‘<code class=css>:empty</code>’ pseudo-class in <a
   href="#ref-SELECT" rel=biblioentry>[SELECT]<!--{{SELECT}}--></a>. But
   ‘<code class=css>::slot(a):empty</code>’ and ‘<code
   class=css>:slot(a):blank' are invalid syntax… </code>

  <p>The <dfn id=blank-pseudo-element title="blank!!pseudo-element">'blank()'
   pseudo-element</dfn> selects named slots that have no content flowed into
   them. ’::slot(a)‘<code class=css> and </code>’::blank(a)‘<code
   class=css> select the same slot, but the latter matches only if the slot
   has no content flowed into it. Whether </code>’::blank()‘<code
   class=css> matches is independent of the slot's 'content' property. (In
   other words: a “blank” slot is not necessarily empty and a slot that
   looks empty is not necessarily “blank,” although that is usually the
   case, given the initial value of 'content'.) </code>

  <div class=example>
   <p>For example, slots a, b and c in the following document are blank, but
    slot * is not, even though slots b and c do not look empty, (because they
    have generated content) and slot d does look empty (because its 'content'
    property doesn't include the keyword ’contents'‘<code class=css>):
    </code>

   <pre>
&lt;style>
body { grid: "a b"
             "c *" }
body::slot(b) { content: "This is slot b" }
body::slot(c) { content: "Page " counter(page) }
body::slot(*) { content: "No content" }
&lt;/style>
&lt;h1>The heading&lt;/h1>
&lt;p>The first paragraph.
</pre>

   <p>All content in this document is flowed into the default slot (*), so
    all other slots are blank.
  </div>

  <div class=example>
   <p>This example shows how to put a border only on slots that have content:

   <pre>
div {grid: "a ."
           ". d"}
div::slot(a), div::slot(d) {border: solid}
div::blank(a), div::blank(d) {border: none}
</pre>
  </div>

  <p>An element that has no content, no background, no border, no padding, no
   margin and no fixed positive width or height has no influence on whether
   the slot it flows into is blank or not. In this case, the content of the
   element is the content that results from applying the ’content' property
   and also includes generated content of its ‘<code
   class=css>::before</code>’ and ‘<code class=css>:after</code>’
   pseudo-elements.

  <div class=example>
   <p>For example, even though there is an address element flowed into slot
    a, slot a is still blank, because the address element happens to have no
    printable content:

   <pre>
&lt;style>
body { grid: "a ."
             ". *" }
body::blank(a) { content: "No address defined" }
address { flow: a }
&lt;/style>
&lt;h1>The heading&lt;/h1>
&lt;p>The first paragraph.
&lt;address>&lt;/address>
</pre>
  </div>

  <p>A slot that is part of a chain (see ‘<a href="#chains0"><code
   class=property>chains</code></a>’) is blank if all content flowed into
   that chain fits into slots earlier in the chain.

  <div class=example>
   <p>For example, this document has very little content that easily fits
    into the first slot. Slot b, which is part of the same chain, thus
    remains blank.

   <pre>
&lt;style>
body { grid: "a . b"; chains: a b; width: 60em }
body::blank(b) { background: silver }
&lt;/style>
&lt;p>Very little content.
</pre>
  </div>
  <!--=================================================================-->

  <h3 id=content><span class=secno>6.3. </span>Slots and the ‘<a
   href="#content1"><code class=property>content</code></a>’ property</h3>

  <p>The ‘<a href="#content1"><code class=property>content</code></a>’
   property applies to slot pseudo elements in a similar way as it applies to
   normal elements and other pseudo-elements. When applied to slots, values
   have the following meaning:

  <dl>
   <dt><dfn id=normal>‘<code class=css>normal</code>’</dfn>

   <dd>Same as ‘<a href="#contents0"><code class=css>contents</code></a>’
    <span class=note>(Note that ‘<a href="#contents0"><code
    class=css>contents</code></a>’ is also the computed value in this
    case.)</span>

   <dt><dfn id=none>‘<code class=css>none</code>’</dfn>

   <dd>The content that is flowed into the slot (with the ‘<a
    href="#flow0"><code class=property>flow</code></a>’ property, or
    because the slot is the <a href="#default-slot.">default slot</a>) is not
    rendered.

   <dt><dfn id=inhibit>‘<code class=css>inhibit</code>’</dfn>

   <dd>Same as ‘<a href="#none"><code class=css>none</code></a>’.

   <dt><dfn id=contents0>‘<code class=css>contents</code>’</dfn>

   <dd>Renders as the content that is flowed into the slot (with the ‘<a
    href="#flow0"><code class=property>flow</code></a>’ property, or
    because the slot is the <a href="#default-slot.">default slot</a>).
  </dl>

  <p>Other values are as defined in <a href="#ref-CSS3GENCON"
   rel=biblioentry>[CSS3GENCON]<!--{{!CSS3GENCON}}--></a> and in <a
   href="#ref-CSS3PAGE" rel=biblioentry>[CSS3PAGE]<!--{{!CSS3PAGE}}--></a>.
   See <a href="#page-templates">“Page-based grid templates”</a> for an
   example of the use of ‘<code class=css>string()</code>’ in the value
   of ‘<a href="#content1"><code class=property>content</code></a>’.

  <p class=issue>[This should be moved to <a href="#ref-CSS3GENCON"
   rel=biblioentry>[CSS3GENCON]<!--{{!CSS3GENCON}}--></a>.] Even if the value
   of ‘<a href="#content1"><code class=property>content</code></a>’ does
   not include ‘<a href="#contents0"><code class=css>contents</code></a>’
   and the content that is flowed into a slot is thus not rendered, any
   counters associated with that content are incremented normally.

  <p class=note>Note: as defined in <a href="#ref-CSS3GENCON"
   rel=biblioentry>[CSS3GENCON]<!--{{CSS3GENCON}}--></a>, the keyword ‘<a
   href="#contents0"><code class=css>contents</code></a>’ may appear
   multiple times in the value of ‘<a href="#content1"><code
   class=property>content</code></a>’, but the second and subsequent
   occurrences are ignored. (Those occurrences are still part of the computed
   value.)
   <!--=================================================================-->

  <h2 id=region-based><span class=secno>7. </span>Styling the contents of
   slots</h2>

  <p><dfn id=region-based-styling>Region-based styling</dfn> refers to style
   rules that are attached to parts of a document that do not correspond to
   an element, but to an area of the canvas. In level 2, there were only two
   such regions, the pseudo-elements ‘<code class=css>first-line</code>’
   and ‘<code class=css>first-letter.</code>’ This module adds <a
   class=index href="#slot" id=slots.>slots.</a>

  <p>A slot may contain parts of multiple elements and the style rules for
   those elements and for the slot are cascaded together in a specific way,
   defined below.

  <div class=example>
   <p>For example, with a style sheet like this

   <pre>
BODY { grid: "a ." 10em ". b"; chains: a b }
P { flow: a; color: blue }
BODY::slot(b) P { color: orange }
</pre>

   <p>and a document fragment like this:

   <pre>
&lt;BODY>
 &lt;P>The text of the first paragraph...
 &lt;P>The text of the second paragraph...
 &lt;P>The text of the third paragraph...
&lt;/BODY>
</pre>

   <p>The three paragraphs will be rendered inside slot a and, if there is
    more content than fits in that slot, the rest will be rendered in
    slot b. Ps are blue by the second line in the style sheet, but the third
    line says that any part of a P that is inside slot b will be orange.
  </div>

  <p>In CSS level 2, pseudo-elements could only occur at the end of a
   selector. Thus an attempt to select ‘<code class=css>P::first-line
   EM</code>’ fails. That restriction does not apply to the <a class=index
   href="#slot-pseudo-element." id=s1 title="slot!!pseudo-element">‘<code
   class=css>::slot()</code>’ pseudo-element,</a> as shown in the example
   above.

  <p>To resolve which style rules apply to an element or part of an element
   that is inside a slot…

  <p class=issue>Fix. Can we use a fictional tag sequence as in level 2?
   Only for inherited properties, maybe. Or only for a restricted set of
   properties, e.g., only those that apply to first-letter.

  <p class=issue>See <a href="#select-after-pseudo">“Style the contents of
   slots (region-based styling)”</a> below for a discussion of alternatives
   to ‘<a href="#atregion"><code class=css>@region</code></a>’.
   <!--=================================================================-->

  <h2 id=rendering-of-grid-elements><span class=secno>8. </span>Rendering of
   grid elements</h2>

  <p>Grid elements influence the stacking order, page breaks, the position of
   floats, etc. of the content inside them.
   <!--=================================================================-->

  <h3 id=vertical-alignment><span class=secno>8.1. </span>Vertical alignment
   of the contents of slots</h3>

  <p>‘<a href="#vertical-align"><code class=css><span class=index
   id=vertical-align2>Vertical-align</span></code></a>’ applies to slots in
   a similar way as it applies to table cells <a href="#ref-CSS3TBL"
   rel=biblioentry>[CSS3TBL]<!--{{CSS3TBL}}--></a> and margin boxes <a
   href="#ref-CSS3PAGE" rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a>.

  <p class=issue>‘<code class=property>Align-content</code>’ in <a
   href="#ref-CSS3-FLEXBOX"
   rel=biblioentry>[CSS3-FLEXBOX]<!--{{CSS3-FLEXBOX}}--></a> has ‘<code
   class=css>flex-start</code>’, ‘<code class=css>flex-end</code>’ and
   ‘<code class=css>center</code>’, which are a bit similar to ‘<a
   href="#top"><code class=css>top</code></a>’, ‘<a href="#bottom"><code
   class=css>bottom</code></a>’ and ‘<code class=css>middle</code>’.
   But it also has ‘<code class=css>space-between</code>’ and ‘<code
   class=css>stretch</code>’, which make little sense in a flow, and it
   lacks ‘<code class=css>baseline</code>’. The similarity of slots to
   table cells and margin boxes argues for sticking with ‘<a
   href="#vertical-align"><code class=property>vertical-align</code></a>’.

  <p>For the purpose of this section we define the <dfn id=a-edge>A
   edge</dfn> and <dfn id=c-edge>C edge</dfn> of a box as a
   writing-mode-dependent edge as follows:

  <table class=data>
   <thead>
    <tr>
     <th>Value of ‘<a href="#writing-mode"><code
      class=property>writing-mode</code></a>’

     <th>Meaning of “A”

     <th>Meaning of “C”

   <tbody>
    <tr>
     <th>‘<code class=css>horizontal-tb</code>’

     <td>top

     <td>bottom

    <tr>
     <th>‘<code class=css>vertical-rl</code>’

     <td>right

     <td>left

    <tr>
     <th>‘<code class=css>vertical-lr</code>’

     <td>left

     <td>right
  </table>

  <p>E.g., if a box is <a href="#horizontal-element.">horizontal,</a> the
   “A edge” is the top edge.

  <p>The ‘<a href="#vertical-align"><code
   class=property>vertical-align</code></a>’ property of a ‘<code
   class=css>::slot()</code>’ pseudo-element can be used to align elements
   vertically in a slot (or horizontally, if the slot is <a
   href="#vertical-element">vertical</a>). The effect is as if the <a
   href="#anonymous-block"><em title="anonymous block of a slot">hypothetical
   anonymous block</em></a> that contains the slot's contents is positioned
   as defined below.

  <dl>
   <dt>bottom

   <dd> The content of the slot is aligned to the <a href="#c-edge">C
    edge</a> of the slot: the C margin edge of the anonymous block coincides
    with the C margin edge of the slot.

   <dt>middle

   <dd> The content of the slot is centered in the slot: the distance between
    the <a href="#a-edge" title="A edge">A</a> margin edge of the anonymous
    block and the <a href="#a-edge" title="A edge">A</a> margin edge of the
    slot is equal to the distance between the <a href="#c-edge"
    title="C edge">C</a> margin edge of the anonymous block and the <a
    href="#c-edge" title="C edge">C</a> margin edge of the slot.
    <p class=note>(Note that if the content overflows the slot, it will
     overflow at both edges.)

   <dt>baseline

   <dd> The anonymous block that encloses the content is placed as far as
    possible in the direction against the <a
    href="#block-flow-direction"><em>block flow direction</em></a> under two
    constraints:
    <ol>
     <li>The <a href="#a-edge" title="A edge">A</a> margin edge of the
      anonymous block may not be beyond the <a href="#a-edge"
      title="A edge">A</a> margin edge of the slot.

     <li>If the content has a relevant first line (see below), then the
      baseline of that line must align with the baselines of the relevant
      first lines in all other slots with the same ‘<a
      href="#writing-mode"><code class=property>writing-mode</code></a>’
      and the same ‘<a href="#vertical-align"><code
      class=property>vertical-align</code></a>’ in the same row (if the
      slot is <a href="#horizontal-element.">horizontal</a>) or the same
      column (if the slot is <a href="#vertical-element">vertical</a>). A
      slot has a relevant first line, if the content has a first line
      (ignoring any lines inside floats) and that first line has the same
      ‘<a href="#writing-mode"><code
      class=property>writing-mode</code></a>’ as the slot itself.
    </ol>

    <p class=note>For example, for a <a
     href="#horizontal-element.">horizontal</a> slot, this means that the
     first baseline must be aligned with the first baselines of all other
     horizontal slots in the row that also have ‘<code
     class=css>vertical-align: baseline</code>’.

   <dt><var>&lt;percentage&gt;</var>

   <dd> ‘<code class=css>0%</code>’ means the same as ‘<a
    href="#bottom"><code class=css>bottom</code></a>’, ‘<code
    class=css>100%</code>’ means the same as ‘<a href="#top"><code
    class=css>top</code></a>’, other values are linear interpolations of
    these. Negative values and values over 100% are interpreted as 0% and
    100% respectively.
    <p class=note>Note that 100% minus the percentage corresponds to the
     initial position of the scrolling mechanism (if any) in case the content
     overflows.
  </dl>

  <p>For all other values, the content is aligned as for ‘<code
   class=css>baseline</code>’.

  <p class=note>Note that baseline alignment may cause a slot to overflow (if
   the slot is the last in a ‘<a href="#chain."><code
   class=property>chain</code></a>’) or to remain empty (because the first
   line box is put in the next chained slot instead).

  <div class=example>
   <p>Example: Given a document like this

   <pre>
&lt;BODY>
&lt;P>...&lt;/P>
&lt;FIGURE>...&lt;/FIGURE>
&lt;P>...&lt;/P>
&lt;FIGURE>...&lt;/FIGURE>
&lt;P>...&lt;/P>
&lt;FIGURE>...&lt;/FIGURE>
&lt;P>...&lt;/P>
&lt;FIGURE>...&lt;/FIGURE>
&lt;/BODY>
</pre>

   <p>and a style like this:

   <pre>
BODY { grid: "a b" }
P { flow: a }
FIGURE { flow: b }
</pre>

   <p>the paragraphs will be in the first slot (a) and the figures in the
    second (b). There are two ways to align the contents of the two slots to
    the bottom. One is with ‘<a href="#vertical-align"><code
    class=property>vertical-align</code></a>’:

   <pre>BODY::slot(a), BODY::slot(b) { vertical-align: bottom }</pre>

   <p>The other is with flexible margins:

   <pre>P:first-of-type, FIGURE:first-of-type { margin-top: fill }</pre>
  </div>

  <div class=example>
   <p>Example: There is no value for ‘<a href="#vertical-align"><code
    class=property>vertical-align</code></a>’ to distribute elements
    vertically over the available space (similar to how ‘<code
    class=css>text-align: justify</code>’ distributes words over the
    available space). But the effect can be achieved with stretchable
    margins. Assume the same document as in the previous example and this
    style sheet:

   <pre>
BODY { grid: "a b" }
P { flow: a; margin-top: fill; margin-bottom: fill }
FIGURE { flow: b }
</pre>

   <p>Because there are stretchable margins between the Ps, the Ps will be
    equally distributed over the height of the slot (assuming the slot is
    taller than its contents, i.e., assuming the contents of slot b is taller
    than the contents of slot a).
  </div>

  <p class=note>Note that, if there are one or more margins in the contents
   of the slot with a ‘<code class=css>fill</code>’ value (see <a
   href="#ref-CSS3BOX" rel=biblioentry>[CSS3BOX]<!--{{CSS3BOX}}--></a>), the
   height of the content fits the height of the slot and thus the ‘<a
   href="#top"><code class=css>top</code></a>’, ‘<code
   class=css>middle</code>’ and ‘<a href="#bottom"><code
   class=css>bottom</code></a>’ values are indistinguishable.
   <!--=================================================================-->

  <h3 id=paged><span class=secno>8.2. </span>Breaking grid elements across
   pages or columns</h3>

  <p><a href="#grid-element.">Grid elements</a> may be broken across pages,
   columns or similar regions (including chained slots of another grid
   element), subject to the ‘<a href="#break-before"><code
   class=property>break-before</code></a>’, ‘<a href="#break-after"><code
   class=property>break-after</code></a>’ and ‘<a
   href="#break-inside"><code class=property>break-inside</code></a>’
   properties. In addition to the break points listed in the Fragmentation
   module <a href="#ref-CSS-BREAK-3"
   rel=biblioentry>[CSS-BREAK-3]<!--{{!CSS-BREAK-3}}--></a>, a page break may
   occur between two rows in a template, if there is a possible break point
   at the same height or higher in all slots that span those two rows; and a
   page break may occur inside a row if there is a possible break point in
   all slots in that row.

  <p class=issue>Try to be more precise?

  <p>In the terminology of <a href="#ref-CSS-BREAK-3"
   rel=biblioentry>[CSS-BREAK-3]<!--{{CSS-BREAK-3}}--></a>, a <a
   href="#slot"><em>slot</em></a> is a <a href="#fragmenter"><em class=index
   id=fragmenter0>fragmenter</em></a> of type ‘<a href="#region."><code
   class=css>region</code></a>’.

  <p>A forced break on an element in a slot causes the rest of the flow of
   that slot to continue in another page, column or slot (depending on the
   type of break). The following cases are special:

  <ul>
   <li>
    <p>A forced page break causes all elements after the break (in document
     order) to be on a new page. On which subsequent page they fall depends
     on any page templates: there may not be a slot with the right name on
     the next page.

   <li>
    <p>A forced column break only has effect if the element's multicol
     ancestor is a descendant (is “inside”) the element's grid ancestor.
  </ul>

  <div class=example>
   <p>For example, this document fragment has a column element inside a grid
    element. Column breaks affect the content of a single slot, but do not
    affect the other slots of the grid element:

   <pre>
&lt;DIV STYLE="grid: 'a b' 'c d'">
 &lt;DIV STYLE="flow: a">
  I'm in slot a.
 &lt;/DIV>
 &lt;DIV STYLE="flow: b; columns: 20em">
  &lt;P>This text is in columns.
  &lt;H2 STYLE="break-before: column">Heading at top of column&lt;/H2>
  &lt;P>...
 &lt;/DIV
&lt;/DIV></pre>
  </div>

  <div class=example>
   <p>For example, this document fragment has a grid element inside a column
    element and thus the column break on the H2 is ignored:

   <pre>
&lt;DIV STYLE="columns: 20em">
 &lt;DIV STYLE="grid: 'a b' 'c d'">
  &lt;P>I'm inside slot a inside some columns.
  &lt;H2 STYLE="break-before: column">No break&lt;/H2>
  &lt;P>...
 &lt;/DIV>
&lt;/DIV></pre>
  </div>

  <div class=example>
   <p>A slide presentation can be made with a template for each page (i.e.,
    slide) and forced page break between the slides:

   <pre>
@page	{ grid: "a"  5em
	        "@"  *
	        "b"  auto }
h1	{ page-break-before: always;
	  flow: a }
p.note	{ flow: b }
</pre>

   <p>With a document similar to this: (fragment)

   <pre>
<b>&lt;h1></b>Slide 1 title<b>&lt;/h1></b>
<b>&lt;ul></b>
 <b>&lt;li></b>Topic one
<b>&lt;/ul></b>
<b>&lt;h1></b>Slide 2 title<b>&lt;/h1></b>
<b>&lt;ul></b>
 <b>&lt;li></b>More topics
<b>&lt;/ul></b>
<b>&lt;p class=note></b>Note the note
</pre>
  </div>

  <div class=example>
   <p>The document in the example above doesn't have an element that
    corresponds to a slide; a slide simply starts at an H1 and ends before
    the next H1. But if there is a DIV around each slide (as is the case in
    many slide formats in practice), the same effect can also be achieved
    without page-based templates, by using the ‘<code
    class=css>vh</code>’ unit <a href="#ref-CSS3VAL"
    rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>:

   <pre>
div.slide {height: 100vh; grid: "a" 5em "*" "b" intrinsic;
    page-break-before: always}
h1 {flow: a}
p.note {flow: b}
</pre>

   <p>With a document similar to this: (fragment)

   <pre>
<b>&lt;div class=slide></b>
 <b>&lt;h1></b>Slide 1 title<b>&lt;/h1></b>
 <b>&lt;ul></b>
  <b>&lt;li></b>Topic one
 <b>&lt;/ul></b>
<b>&lt;/div></b>
<b>&lt;div class=slide></b>
 <b>&lt;h1></b>Slide 2 title<b>&lt;/h1></b>
 <b>&lt;ul></b>
  <b>&lt;li></b>More topics
 <b>&lt;/ul></b>
 <b>&lt;p class=note></b>Note the note
<b>&lt;/div></b>
</pre>
  </div>
  <!--=================================================================-->

  <h3 id=stacking-order><span class=secno>8.3. </span>Stacking order</h3>

  <p>Each slot generates a separate <a href="#stacking-context."><em>stacking
   context.</em></a> The stacking order of these stacking contexts is given
   by their ‘<a href="#z-index"><code class=property>z-index</code></a>’
   property, with ‘<code class=css>auto</code>’ treated as ‘<code
   class=css>0</code>’. Slots with the same ‘<a href="#z-index"><code
   class=property>z-index</code></a>’ are stacked in the order in which
   they are defined in the ‘<a href="#grid-template-areas"><code
   class=property>grid-template-areas</code></a>’ property, looking only at
   the first occurrence of the slot's name (i.e., the top left corner if the
   slot spans several rows or columns).

  <p class=note>A slot thus has a very similar behavior in the stacking order
   as an element with ‘<code class=css>position: relative</code>’ and
   ‘<code class=css>z-index: 0</code>’ (or another value of ‘<a
   href="#z-index"><code class=property>z-index</code></a>’ other than
   ‘<code class=css>auto</code>’).

  <div class=example>
   <p>For example, the stacking order of the slots in the following template
    is, from back to front, a, x, c, d, e, p, g.

   <pre>
grid: "a x x c"
      "d x x e"
      "p p g g"
</pre>

   <p>The stacking order can be made visible, e.g., by giving slots opaque
    backgrounds and negative margins, so that they overlap. See the next
    example.
  </div>

  <div class=example>
   <p>This example uses ‘<a href="#z-index"><code
    class=property>z-index</code></a>’ and negative margins to make the
    middle slot partly overlap the other slots:

   <pre>
body { grid: "a . b"
             ". c ."
             "d . e";
       height: 240px;
       width: 240px }
::slot(a) { background: #0C0 }
::slot(b) { background: #C00 }
::slot(c) { background: #FD0; margin: -20px; z-index: 1 }
::slot(d) { background: #00C }
::slot(e) { background: #A0A }
</pre>

   <div class=figure>
    <p><img alt="Five colored rectangles" longdesc=overlap.desc
     src=overlap.png>

    <p class=caption>Rendering of the above example.
   </div>
  </div>

  <div class=example>
   <p>This example has a heading (H1) that is wider than its slot and
    overlaps the image in the slot next to it:

   <pre>
body {grid: "a b"}
::slot(a) {z-index: 1}
h1 {flow: a; width: 200%}
p {flow: a}
img {flow: b}
</pre>

   <div class=figure>
    <p><img alt="The title overlaps the image" src=z-index.png>

    <p class=caption>Rendering of the above example.
   </div>

   <p>The ‘<a href="#z-index"><code class=property>z-index</code></a>’ is
    necessary, because the ‘<code class=css>a</code>’ slot comes before
    the ‘<code class=css>b</code>’ slot in the template and all its
    content would thus be rendered behind the ‘<code class=css>b</code>’
    slot with default ‘<a href="#z-index"><code
    class=property>z-index</code></a>’ values.
  </div>
  <!--=================================================================-->

  <h3 id=floating-elements-inside-templates><span class=secno>8.4.
   </span>Floating elements inside templates</h3>

  <p>An element may be flowed into a slot and be a floating element at the
   same time. The following cases must be distinguished:

  <ul>
   <li>Page-based floats – In paged media (see <a href="#ref-CSS3PAGE"
    rel=biblioentry>[CSS3PAGE]<!--{{!CSS3PAGE}}--></a>), if the value of
    ‘<a href="#float"><code class=property>float</code></a>’ specifies
    that the element floats to the top or bottom of the page (in a horizontal
    writing mode) or the left or right of the page (in a vertical writing
    mode), the slot act as the page. (I.e., the element floats to the top,
    bottom, etc. of the slot, not of the page.

   <li>Footnotes – Likewise, the footnote area for elements with ‘<code
    class=css>float: footnote</code>’ is at the bottom of the slot, not of
    the page. The @footnote at-rule can position the footnote area at other
    places, such as the top, but always inside the slot.

   <li>Normal floats – In other cases, the element floats normally within
    its <span class=index id=containing-block2>containing block,</span> which
    in this case is its slot in the template.
  </ul>

  <p class=issue>The ‘<code class=css>@footnote</code>’ at-rule from <a
   href="#ref-CSS3GCPM" rel=biblioentry>[CSS3GCPM]<!--{{CSS3GCPM}}--></a>
   needs to be extended to apply to slots: ‘<code class=css>@footnote
   :first::slot(a)</code>’ is the footnote area of slot a on the first
   page.
   <!--=================================================================-->

  <h2 id=page-templates><span class=secno>9. </span>Page-based grid templates</h2>

  <p>A template can also be attached to a page, rather than an element. Such
   a template is called a <dfn id=page-based-template>page-based
   template</dfn> as opposed to an <dfn
   id=element-based-template.>element-based template.</dfn>

  <div class=example>
   <p>Here is an example of a template used to position two centered running
    headers with different styles. (This would be impossible to do with the
    predefined page template of <a href="#ref-CSS3GCPM"
    rel=biblioentry>[CSS3GCPM]<!--{{CSS3GCPM}}--></a>, because it has only
    one centered margin box at the top.)

   <pre>
@page {
 grid: "t1" 1.2em    /* space for 1st running header */
       "t2" 1.2em    /* space for 2nd running header */
       "." 2em
       "*"           /* page body */
}
::slot(t1) { content: string(chapter); color: red; text-align: center }
::slot(t2) { content: string(section); color: green; text-align: center }

h1 { string-set: chapter contents }
h2 { string-set: section contents }
</pre>

   <p>See <a href="#content">“Slots and the ‘<code
    class=property>content</code>’ property”</a> for the definition of
    the ‘<a href="#content1"><code class=property>content</code></a>’
    property on slots.
  </div>

  <p>The syntax of a page-based template is the same as that of an <a
   href="#element-based-template."
   title="element-based template">element-based one,</a> but the declaration
   appears in an ‘<code class=css>@page</code>’ rule.

  <p>In a page-based template, the height and width are typically known
   (defined by the output media and the margin boxes, see <a
   href="#ref-CSS3PAGE" rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a>).
   And content that overflows a slot typically is not clipped (or hidden
   behind a scrolling mechanism), but is continued on a subsequent page.

  <p>Because the grid template is not attached to an element but to a page,
   the slot names have global scope. But they can be hidden to elements that
   have a grid ancestor that uses the same slot names.

  <p>This modifies the rules for ‘<a href="#flow0"><code
   class=property>flow</code></a>’: if the property refers to a slot that
   is not found in a <a href="#grid-ancestor">grid ancestor,</a> it refers
   instead to a slot in a page template (if there is one and it has a slot of
   that name).

  <p class=issue>Should we simplify page-based templates to only allow <a
   href="#ltlengthgt"><var>&lt;length&gt;</var></a> and * as row heights and
   column widths? (And treat illegal sizes as ‘<code
   class=css>*</code>’?)

  <div class=example>
   <pre>
@page :first {grid: "a b c" "d e f"}
@page {grid: "d e f"}

body {flow: e}
h1 {flow: b}
</pre>
  </div>

  <p>A page that has a grid template does not have a footnote area <a
   href="#ref-CSS3GCPM" rel=biblioentry>[CSS3GCPM]<!--{{CSS3GCPM}}--></a>.
   Instead each slot in the grid template has its own footnote area.

  <p id=page-break>If a slot of a page-based template on <a
   href="#non-interactive"><em>non-interactive</em></a> media has an ‘<a
   href="#overflow"><code class=property>overflow</code></a>’ property of
   ‘<code class=css>visible</code>’, then content that overflows that
   slot in the block progression direction (i.e., below the slot in the case
   of horizontal text) causes a page break and is continued on the next page.

  <p class=issue>What happens in non-interactive media with an ‘<a
   href="#overflow"><code class=property>overflow</code></a>’ of ‘<code
   class=css>scroll</code>’ or ‘<code class=css>auto</code>’?

  <p>For page breaking purposes, each slot is considered as a page and the
   page break properties on the elements in that slot determine where the
   content for that slot is broken <a href="#ref-CSS-BREAK-3"
   rel=biblioentry>[CSS-BREAK-3]<!--{{!CSS-BREAK-3}}--></a>. Content after
   the page break is put in the slot of the same name on the next page that
   has such a slot. If there is no such page, the UA should display the
   content on a separate page.

  <p class=issue>Or: the content after the page break is not displayed?
   displayed in the default slot?

  <p class=note>Note that this may happen if the template for the first page
   (‘<code class=css>@page :first</code>’) uses a slot name that occurs
   in no other @page rule. Possibly also if a page template is bound to a
   “named page” <a href="#ref-CSS3GCPM"
   rel=biblioentry>[CSS3GCPM]<!--{{CSS3GCPM}}--></a> and that named page is
   not allowed to repeat. (At the time of writing, this is only a proposal in
   the GCPM Module.)

  <p class=note>Note that an element <var>A</var> that appears later in the
   document than an element <var>B</var> may thus be displayed on an earlier
   page than element <var>B</var>, because their respective slots are broken
   across pages in different ways.

  <p>Because of limitations of a device (e.g., limited memory), it may be
   that a UA has to print a page (force page breaks) even though some slots
   aren't filled yet.

  <div class=example>
   <p>This example shows a document with text in two languages, which are to
    be shown side by side:

   <pre>
@page {grid: "a b"}
:lang(en) {flow: a}
:lang(fr) {flow: b}
</pre>

   <p>This works with a document where the languages are separated like this:

   <pre>
&lt;BODY>
 &lt;DIV LANG=en>
  &lt;H1>The blue house&lt;/H1>
  ...
 &lt;/DIV>
 &lt;DIV LANG=fr>
  &lt;H1>La maison bleue&lt;/H1>
  ...
 &lt;/DIV>
&lt;/BODY>
</pre>

   <p>But also with a document where the languages are interleaved:

   <pre>
&lt;BODY>
 &lt;H1 LANG=en>
 &lt;H1 LANG=fr>
 &lt;P LANG=en>...
 &lt;P LANG=fr>...
 ...
&lt;/BODY>
</pre>
  </div>

  <div class=example>
   <p>This example shows how the first page may have a different layout from
    the other pages. The slot ‘<code class=css>a</code>’ only occurs on
    the first page. If the content for that slot (in this case: all H1
    elements) is too long, the remaining content of that slot <span
    class=issue>will not be displayed.</span> The slot ‘<code
    class=css>@</code>’ occurs on normal pages and all its content can thus
    be displayed by adding additional pages.

   <pre>
@page :first {grid: "a" "*"}
@page {grid: "*"}
h1 {flow: a}
</pre>
  </div>

  <p class=note>Note that “page masters” (sequences of different
   templates for sequences of pages) can be made with the selectors defined
   in <span class=issue>[not yet decided].</span>

  <div class=example>
   <p>Both page-based and element-based templates can be used in the same
    document.

   <pre>
@page {grid: "a*"}
:lang(fr} {flow: a}
div.special {grid: "a b c" "a b d"}
</pre>
  </div>

  <div class=example>
   <p>Here is a page as one might find in a newspaper. It combines a layout
    template with multicolumn layout.

   <div class=figure>
    <p><img
     alt="5-column newspaper page with some   blocks of text that span several columns"
     longdesc=newspaper.desc src=newspaper.png>

    <p class=caption>The front page of a newspaper, with the first parts of
     several stories that are continued on other pages and headings and
     images that span several columns.
   </div>

   <pre>
@page :first {
  grid:  * 3em * 3em * 3em * 3em *
        "A  A  A  A  A  A  A  A  A"  5cm
	".  .  .  .  .  .  .  .  ."  0.25cm
	"B  .  C  C  C  C  C  C  C"  *
	"B  .  C  C  C  C  C  C  C"  *
	"B  .  C  C  C  C  C  C  C"  *
	"B  .  C  C  C  C  C  C  C"  *
	"B  .  C  C  C  C  C  C  C"  *
	"B  .  D  D  D  D  D  D  D"  *
	"B  .  D  D  D  D  D  D  D"  *
	"B  .  E  E  E  .  F  F  F"  *
	"B  .  E  E  E  .  F  F  F"  *
	"B  .  E  E  E  .  F  F  F"  *
}
h1 {flow: a; border-bottom: thick; margin-bottom: 1.5em}
#toc {flow: b; margin-right: -1.5em; border-right: thin;
  padding-right: 1.5em}
#leader {flow: c; columns: 4; column-gap: 3em}
#art1 {flow: d; columns: 4; column-gap: 3em; border-top: thin}
#art2 {flow: e; columns: 2; column-gap: 3em}
#art3 {flow: f; columns: 2; column-gap: 3em}
</pre>
  </div>

  <p class=issue id=see-page>If a slot on a page is full and the content
   continues on the next page, it may be useful to insert something like
   “continued on page X.” This is useful at any page break, but more
   important if there are multiple “flows” of content on each page. Maybe
   a break-content property? ‘<code class=css>break-content: "▶ continued
   on p. " targetcounter(???, page)</code>’ or extend text-overflow from <a
   href="#ref-CSS-TEXT-3"
   rel=biblioentry>[CSS-TEXT-3]<!--{{!CSS-TEXT-3}}--></a>?

  <div class=issue>
   <p>How do you style the slots of page-based template? E.g., with

   <pre>
@page :first {
  grid: "a b"
        "c d" }
@page {
  grid: "a a a"
        "b c d" }

::slot(a) {background: silver}
</pre>

   <p>the background could be set on all “a” slots on all pages. But how
    do you set a background only on the “a” slot of the <em>first</em>
    page? Maybe we need to extend the page selectors and allow something like
    this:

   <pre>
@page :first::slot(a) {background: silver}
</pre>

   <p>A space between the pseudo-class and the pseudo-element could be
    optional.
  </div>
  <!--=================================================================-->

  <h2 id=chains><span class=secno>10. </span>Chaining slots: the ‘<a
   href="#chains0"><code class=property>chains</code></a>’ property</h2>

  <p>Slots must be rectangular, but the appearance of non-rectangular slots
   can be achieved to some extent by chaining slots together. Content that is
   positioned in the first slot of a chain is automatically continued in the
   second slot if the first slot is full, and then the third, etc.

  <table class=propdef>
   <tbody>
    <tr>
     <td>Name:

     <td><dfn id=chains0>chains</dfn>

    <tr>
     <td>Value:

     <td>none | <var>&lt;identifier&gt;</var>+ [ ,
      <var>&lt;identifier&gt;</var>+ ]*

    <tr>
     <td>Initial:

     <td>none

    <tr>
     <td>Applies to:

     <td><a href="#grid-element.">grid elements</a>

    <tr>
     <td>Inherited:

     <td>no

    <tr>
     <td>Animatable:

     <td>no

    <tr>
     <td>Percentages:

     <td>N/A

    <tr>
     <td>Computed value:

     <td>specified value

    <tr>
     <td>Canonical order:

     <td><abbr title="follows order of property value definition">per
      grammar</abbr>
  </table>

  <p>A value of ‘<a href="#none"><code class=css>none</code></a>’ means
   the element's template has no chains. Otherwise the value consists of one
   or more comma-separated lists of identifiers. No identifier may appear
   more than once in the value. Identifiers that do not occur in the
   <em>template</em> are ignored, but do not make the value invalid. A list
   with only ignored identifiers is itself ignored.

  <p>All the non-ignored identifiers in a list, except for the last one, must
   refer to slots whose size does not depend on their contents, otherwise the
   list is ignored. The size of a slot does not depend on its content if all
   the columns and all the rows that the slot spans have a width,
   respectively height, that is a <a
   href="#ltlengthgt"><var>&lt;length&gt;</var></a> or ‘<code
   class=css>*</code>’.

  <p>Each non-ignored list defines one <dfn id=chain.>chain.</dfn>

  <p>Each chain is filled with content in an analogous way to the pages in
   paged media: all the content that is positioned to the first slot in the
   chain is flowed, in document order, into the first slot in the chain until
   the slot is full, the rest is flowed into the second slot until it is
   full, etc.

  <p>Content must only be split between slots at an allowed page break <a
   href="#ref-CSS3PAGE" rel=biblioentry>[CSS3PAGE]<!--{{!CSS3PAGE}}--></a>.
   As for page breaks, if a break occurs in the margin between blocks, all
   adjoining margins are set to zero.

  <p>CSS3 does not define what is the best break point to split content over
   slots. However, it is recommended to use the last possible break point
   that does not cause overflow. (If such a break point exists.)

  <p class=note>Note: It is the author's responsibility to make the height of
   relevant slots an integral number of lines if he wants to ensure that the
   lines in chained slots are aligned. The height does not automatically
   “snap” to a multiple of the line height.

  <div class=example>
   <p>The following template creates a double-staircase layout. In case the
    content is too long for the staircase, a slot of flexible height is added
    at the bottom.

   <pre>
div { grid:    "@ @ . . f f . . . ."  3.6em
               ". a a . . g g . . ."  3.6em
               ". . b b . . h h . ."  3.6em
               ". . . c c . . i i ."  3.6em
               ". . . . d d . . j j"  3.6em
               ". . . . . . . . . ."  0.6em
               "e e e e . . k k k k"  auto;
   chains: @ a b c d e, f g h i j k}
#first { position: @ }
#second { position: f }
</pre>

   <p>This could be applied to a document fragment such as

   <pre>
&lt;DIV&gt;
  &lt;P ID=first&gt;...
  &lt;P ID=second&gt;...
&lt;/DIV&gt;
</pre>
  </div>

  <div class=example>
   <p>Here is a paragraph shaped as a circle:

   <pre>
p { width: 12em;
    grid: ". . . . * * . . . ."  1.2em
	  ". . a a a a a a . ."  1.2em
	  ". b b b b b b b b ."  1.2em
	  ". b b b b b b b b ."  1.2em
	  "c c c c c c c c c c"  1.2em
	  "c c c c c c c c c c"  1.2em
	  ". d d d d d d d d ."  1.2em
	  ". d d d d d d d d ."  1.2em
	  ". . e e e e e e . ."  1.2em
	  ". . . . f f . . . ."  1.2em
	  "g g g g g g g g g g"  auto;
   chains: * a b c d e f g }
</pre>
  </div>

  <div class=example>
   <p>Here is a page-based template that creates a two-column layout with a
    “hole” in the center:

   <pre>
@page:first {
    grid:
    "a a a a a a a . d d d d d d d"
    "a a a a a a a . d d d d d d d"
    "a a a a a a a . d d d d d d d"
    "a a a a a a a . d d d d d d d"
    "b b b b . . . . . . . e e e e"
    "b b b b . g g g g g . e e e e"
    "b b b b . g g g g g . e e e e"
    "b b b b . g g g g g . e e e e"
    "b b b b . . . . . . . e e e e"
    "c c c c c c c . f f f f f f f"
    "c c c c c c c . f f f f f f f"
    "c c c c c c c . f f f f f f f"
    "c c c c c c c . f f f f f f f";
    chains: a b c d e f }
@page::slot(g) {
    <a
    class=index href="#vertical-align"
    id=vertical-align3>vertical-align</a>: middle }

body { flow: a }
h1 { flow: g }
</pre>
  </div>

  <p class=note>Note: For more analysis of the possibilities and limits of
   non-rectangular slots, see the PhD thesis of César Acebal <a
   href="#ref-ACEBAL2010"
   rel=biblioentry>[ACEBAL2010]<!--{{ACEBAL2010}}--></a>.

  <div class=issue>
   <p>Chaining of rectangular slots is not enough to create layouts with
    holes, e.g., an image in the middle of a text. Allowing non-rectangular,
    <em>connected</em> regions (in addition to chaining) would allow an
    example such as this:

   <pre>
grid: "A A A . . ."
      "A . A . . ."
      "A A A . . ."
      ". . . B B B"
      ". . . B . B"
      ". . . B B B";
chains: a b;
</pre>

   <p>Such cutouts in the middle of text usually create text that is
    difficult to read, and that is why there is no ‘<code class=css>float:
    center</code>’, e.g. But the CSS WG is considering a new property
    ‘<code class=property>wrap-flow</code>’ for absolutely positioned
    elements that would allow, e.g.: ‘<code class=css>p {position:
    absolute; top: 1fr; left: 1fr; width: 1fr; height: 1fr; wrap-flow:
    both}</code>’ to absolutely position a P element on top of a grid
    element and cause the content of the element under it to wrap around it
    as if it were a float <a href="#ref-CSS3-EXCLUSIONS"
    rel=biblioentry>[CSS3-EXCLUSIONS]<!--{{CSS3-EXCLUSIONS}}--></a>.
  </div>

  <p class=note>Note that a slot can have overflowing content even if it is
   part of a <a href="#chain.">chain</a>: it can have content that is too
   wide but cannot be broken.

  <p>The ‘<a href="#break-before"><code
   class=property>break-before</code></a>’, ‘<a href="#break-after"><code
   class=property>break-after</code></a>’ and ‘<a
   href="#break-inside"><code class=property>break-inside</code></a>’
   properties have values that control breaking of content between slots in a
   chain (in particular ‘<a href="#region."><code
   class=css>region</code></a>’ and ‘<code
   class=css>avoid-region</code>’, see <a href="#ref-CSS-BREAK-3"
   rel=biblioentry>[CSS-BREAK-3]<!--{{!CSS-BREAK-3}}--></a>).

  <p class=note>Note that, as defined in <a href="#paged">“Breaking grid
   elements across pages or columns”</a> above, a slot is a <a
   href="#fragmenter"><em class=index id=fragmenter1>fragmenter</em></a> of
   type <a href="#region."><em>region</em></a> in the terminology of <a
   href="#ref-CSS-BREAK-3"
   rel=biblioentry>[CSS-BREAK-3]<!--{{!CSS-BREAK-3}}--></a>.
   <!--=================================================================-->

  <h2 id=history><span class=secno>11. </span>History and discussion</h2>

  <p>The following sections contain some of the use cases and design decision
   that led to this module and influenced its evolution.
   <!--=================================================================-->

  <h3 id=developing-a-model-of-declaring-using-st><span class=secno>11.1.
   </span>Developing a model of declaring, using, styling and resizing grids</h3>

  <p><em>(This section is not normative.)</em>

  <p class=mtb>The following types of use cases were considered for
   template-based layout.

  <ol>
   <li>
    <p>Standard Web pages.

   <li>
    <p>Grids and other table-like layouts. This includes grid layouts, frame
     layouts and table-like subdivision of a rectangular area.

   <li>
    <p>A layout structure with “flex”ing information. The flexing is
     represented by constraints that specify how the cells are to relate to
     one another: which cells are to be allowed to grow or shrink and how
     much. There may also be a priority ordering, which determines, based on
     the size of the allowed display window, which cells shrink, which grow
     and under which conditions.

   <li>
    <p>Layout structures with absolutely positioned (fixed-size) elements;
     for example a block of text into which several illustrations intrude at
     fixed positions within the block. This is like a float with respect to
     tightly wrapping the text around the intrusion, but the position of the
     intrusion is determined by the layout structure, not the content flowed
     into that structure.

    <p>An example of this is a multicolumn layout with one or more
     “absolutely positioned floats” that intrude on the columns (see <a
     href="#intrusion">figure</a>).

    <div class=figure id=intrusion>
     <p><img
      alt="An image that partially overlaps two columns makes the text wrap around it on both sides."
      longdesc=cutout.desc src=cutout.svg>

     <p class=caption>An image (or a “pull quote”) is placed centered on
      the page and intrudes on two areas.
    </div>

   <li>
    <p>Multiple, disconnected, fixed-size areas on a page that are chained
     together, each one receiving the content that doesn't fit in the
     previous slot. In combination with page breaks, this may give a layout
     as often seen in newspapers: the first few lines of each story on the
     first page, the rest of the story in other areas on subsequent pages.
     (It will probably need a way to conditionally insert “continued on
     page 7” or similar text.)
  </ol>

  <p>For comparing proposals for template-based layouts, the working group
   identified four important aspects of each proposal:

  <ol>
   <li>
    <p>the physical layout structures – the way of structuring the
     “cells” (slots) into which content is flowed. This includes a way to
     identify the various layout containers.

   <li>
    <p>the binding mechanism – the way to specify that a given element (and
     its descendants) are to be placed in a given layout cell.

   <li>
    <p>the property distribution mechanism – the way to put properties onto
     the layout structure and the cells within it.

   <li>
    <p>the flexing mechanism – the way to describe how the layout structure
     should adapt itself to the higher level container (window) in which it
     is placed. This includes statements about which cells should grow and
     when they should grow.
  </ol>

  <p>In this specification, these aspects are as follows:

  <ol>
   <li>
    <p>A character matrix is used to show the layout structure and the cells
     are named by the character used to show where they are positioned.

   <li>
    <p>The binding of content to cells is handled by the ‘<a
     href="#flow0"><code class=property>flow</code></a>’ property which
     identifies a cell to which the content is bound.

   <li>
    <p>The shape, size and flexibility of the layout are specified with the
     character matrix. Some properties (background, border and vertical
     alignment) are attached to individual slots.

   <li>
    <p>There is limited “flexing” information. The choice is between
     fixed size, a fraction of the available size or the content's intrinsic
     size. (The latter is further subject to min/max sizes specified on that
     content.) It is not possible to say, e.g., that some column can only
     become wider if all other columns are at their maximum size.
  </ol>
  <!--=================================================================-->

  <h3 id=syntax-features-and-levels><span class=secno>11.2. </span>Syntax,
   features and levels</h3>

  <p><em>(This section is not normative.)</em>

  <p>The following is a partial list of design decisions and some arguments
   for and against each choice:
   <!--=================================================================-->

  <h4 id=named-vs-numbered-slots><span class=secno>11.2.1. </span>Named vs
   numbered slots</h4>

  <p>Named slots are very easy to understand and use. Experience with the
   draft showed that everybody who sees an example immediately understands
   what it means. Moreover, there is no need to use numbers or to count.

  <p>But it is different for absolutely positioned elements that use the
   grid. Those elements do not belong to a slot, they are merely placed on
   top of it, overlapping what is already there and each other.

  <p>Also, if grids are <a href="#auto-add">automatically extended with extra
   rows and columns (see below)</a> based on content, then those extra rows
   and columns cannot have names and must (probably, see below) be referred
   to by number.

  <p>In this specification, named slots are used to create flows of content,
   while numbers are used for absolute positioning, although names can be
   used there too, if the author prefers.
   <!--=================================================================-->

  <h4 id=single-letter-names-vs-identifiers><span class=secno>11.2.2.
   </span>Single letter names vs identifiers</h4>

  <p>The set of single letters is finite. And even if Unicode has many
   symbols, typing them may not be easy. Letters also do not permit to give a
   hint as to a slot's function (“heading,” “footer,”
   “advertisement”…).

  <p>On the other hand, any Unicode character can be typed as an escape, so
   if you run out of letters on the keyboard, you can always make a template
   like this:

  <pre>DIV {grid: "\1001\1002\1003\1006"
           "\1001\1004\1005\1006"}
DIV H1 {flow: \1001}</pre>

  <p>In practice, it is also hard to come up with meaningful identifiers and
   so single letters require less thinking. And if you always have single
   letters, you don't need spaces between them either, which makes big
   templates easier to read.

  <p>This specification defines that a template consists of (space-separated)
   identifiers, but many examples use single-letter identifiers.
   <!--=================================================================-->

  <h4 id=quoted-names><span class=secno>11.2.3. </span>Quote marks to delimit
   rows or slot names</h4>

  <p>The current syntax for ‘<a href="#grid"><code
   class=property>grid</code></a>’ (and ‘<a
   href="#grid-template-areas"><code
   class=property>grid-template-areas</code></a>’) groups the slots into
   rows with quote marks:

  <pre>
grid: "a b c"
      "d * e"
</pre>

  <p>Or with some explicit column widths and row heights added:

  <pre>
grid: 10em * 10em
      "a   b   c" 7em
      "d   *   e" *
</pre>

  <p>Instead of using quote marks, other means could be used to delimit the
   rows, e.g., commas:

  <pre>
grid: 10em * 10em
       a   b   c  7em,
       d   @   e  *
</pre>

  <p>Because the ‘<code class=css>*</code>’ would then be ambiguous (it
   could either be a length or a slot name), it has been replaced here by
   ‘<code class=css>@</code>’ (see <a
   href="#star-or-at-sign">“Indicating the default slot”</a>).

  <p>When quotes are not needed to delimit rows, they can be used to delimit
   slot names, which then no longer have to be restricted to identifiers.
   Like the quotes around font family names, the quotes around slot names are
   optional, unless the slot names would be ambiguous without them:

  <pre>
div {grid: a  "middle top"  c,
           d       @        " -=- "}
p {flow: c}                 /* quotes optional */
p.intro {flow: middle top}  /* quotes optional */
img.one {flow: "d"}         /* quotes optional */
img.two {flow: " -=- "}     /* quotes required */
</pre>
  <!--=================================================================-->

  <h4 id=display><span class=secno>11.2.4. </span>Extend ‘<a
   href="#display0"><code class=property>display</code></a>’ or add a grid
   property</h4>

  <p>Grids can be defined on elements such as table cells, blocks, inline
   blocks or list items, but not on elements such as tables or, inline
   elements. That can be expressed in the syntax by adding the grid to the
   ‘<a href="#display0"><code class=property>display</code></a>’
   property: ‘<code class=css>display: inline-block "a b c" "a b
   d"</code>’ would be valid, but ‘<code class=css>display: inline "a b
   c" "a b d"</code>’ would not be. Or it can be expressed by an implicit
   dependency between properties: ‘<code class=css>display: inline-block;
   grid: "a b c" "a b d"</code>’ has a grid, but ‘<code
   class=css>display: inline; grid: "a b c" "a b d"</code>’ ignores the
   grid. (In this case it is actually the computed value of ‘<a
   href="#display0"><code class=property>display</code></a>’ that applies,
   so, e.g., if the element floats, it would be a block and thus have a
   grid.)

  <p>The Multicol specification <a href="#ref-CSS3COL"
   rel=biblioentry>[CSS3COL]<!--{{CSS3COL}}--></a> uses the latter model:
   ‘<a href="#columns0"><code class=property>columns</code></a>’ is a
   separate property and only applies if the element is a <a
   href="#block-container"><em>block container.</em></a> Given that
   precedent, it seemed reasonable to do the same here.
   <!--=================================================================-->

  <h4 id=combining-columns-and-grids><span class=secno>11.2.5.
   </span>Combining columns and grids</h4>

  <p>Style rules can specify both a grid and columns for the same element:

  <pre>DIV {columns: 20em; grid: "a a b c c c"}</pre>

  <p>The specification could say that grids don't apply to column elements,
   or vice versa, or it could say that the columns apply to contents of the
   DIV, after it has been flowed into the <a
   href="#default-slot."><em>default slot.</em></a> This last option seemed
   the most useful. It is consistent with other elements that flow into a
   slots: they, too, can have columns.
   <!--=================================================================-->

  <h4 id=shorthand-vs-single-property><span class=secno>11.2.6.
   </span>Shorthand vs single property</h4>

  <p>It is convenient to specify the grid as the value of a single property.
   It puts the column and row sizes immediately next to the rows and columns
   they apply to. The typical column widths can either be omitted or are
   short values like ‘<code class=css>*</code>’ and ‘<code
   class=css>1em</code>’, and they fit easily in one line.

  <p>But if a grid has very many columns, or their sizes are complex (with
   many ‘<code class=css>minmax()</code>’ and ‘<code
   class=css>calc()</code>’ values, e.g.), it may be more readable to
   separate the slot names from the column sizes.

  <p>Also, separable properties for row and column sizes makes is easier to
   specify a transition/animation on them,, because you don't have to repeat
   the slot names (which cannot animate).

  <p>For those reasons, this specification defines the ‘<a
   href="#grid"><code class=property>grid</code></a>’ property as a
   shorthand, at the cost for authors of having to learn four new properties
   instead of one (or even zero, if the grid were added to <a
   href="#display">display (see above).</a>
   <!--=================================================================-->

  <h4 id=the-number-of-rows-and-columns><span class=secno>11.2.7. </span>The
   number of rows and columns</h4>

  <p>If the grid template can also be specified with individual properties,
   how many columns &amp; rows does it have if those properties contradict
   each other? Does the template (if not ‘<a href="#none"><code
   class=css>none</code></a>’) determine the number of columns or the
   maximum of the template and the list of sizes? E.g.:

  <table class=equiv-table>
   <thead>
    <tr>
     <th>Specified values

     <th>Meaning if the template prevails

     <th>Meaning if the maximum value is used

   <tbody>
    <tr>
     <td>
      <pre>grid-template-areas: "a b c";
grid-template-columns: * * * * *</pre>

     <td>
      <pre>grid-template-areas: "a b c";
grid-template-columns: * * *</pre>

     <td>
      <pre>grid-template-areas: "a b c . .";
grid-template-columns: * * * *</pre>
  </table>

  <p>The former is consistent with the model for ‘<a
   href="#background-image"><code
   class=property>background-image</code></a>’ and ‘<a
   href="#background-size"><code
   class=property>background-size</code></a>’. However, unlike for
   backgrounds, where a size without an image makes no sense, in this case a
   size without a slot name <em>can</em> make sense: it can represent empty
   space (‘<code class=css>.</code>’) of that size.

  <p>What is more likely: that people consciously specify empty rows and
   columns without putting dots in the template (to save typing or to avoid
   typing too many dots), or that people mistakenly add a size too many?

  <p>The specification currently sets the number of rows and columns to the
   maximum of the three properties.
   <!--=================================================================-->

  <h4 id=need-fr><span class=secno>11.2.8. </span>‘<code
   class=css>*</code>’ vs ‘<code class=css>fr</code>’</h4>

  <p><a href="http://www.w3.org/Style/CSS/Tracker/issues/127">ISSUE-127:</a>
   It is very common for the columns of a grid to have all the same width.
   Or, if they do not, to at least be small multiples of a fundamental
   measure. And thus equal columns is the default in the current syntax. And
   if it needs to be specified explicitly which columns have the same width
   (e.g., because there are also other columns in the grid) then the symbol
   for it is short: ‘<code class=css>*</code>’. This also works very well
   for slots whose widths are small multiples of the fundamental measure.
   E.g., the widths of slots a, b and c in the following grid relate to each
   other as 1:3:2:

  <pre>
grid: "a b b b c c"
      "a . . . c c"
</pre>

  <p>However, if the ratios of the slots are ratios of larger numbers, the
   notation may become long. E.g., to make slots a and b with ratio 10:11,
   you would have to make 21 columns:

  <pre>grid: "a a a a a a a a a a b b b b b b b b b b b"</pre>

  <p>It needs to be investigated if such ratios are frequent. (They don't
   seem to occur in printed magazines.) And if among the ratios that do
   occur, even if infrequently, there are some that would be impractical to
   write in this way.

  <p>Assuming another notation is needed, it could be made by prefixing a
   number (e.g., ‘<code class=css>7* 10*</code>’) or, to make the
   notation look more like a dimension, by means of a special unit ‘<code
   class=css>fr</code>’ (“fraction”). E.g., ‘<code class=css>3.5fr
   5fr</code>’ would be the same as 7 + 10 stars).

  <p>If ‘<code class=css>fr</code>’ is added, it could either be in
   addition to ‘<code class=css>*</code>’ or instead of ‘<code
   class=css>*</code>’. In the former case, ‘<code class=css>*</code>’
   = ‘<code class=css>1fr</code>’.

  <p>Unless it is shown that the notation with only ‘<code
   class=css>*</code>’ is not practical in real cases, it seems better to
   neither introduce numbers (‘<code class=css>7*</code>’) nor units
   (‘<code class=css>3.5fr</code>’). It would give too many different
   ways to write the same grid, causing authors and readers of style sheets
   to have to think longer about each grid. (E.g., ‘<code class=css>grid:
   "a b b b c c"</code>’ could then also be written as ‘<code
   class=css>grid: 1* 3* 2* "a b c"</code>’ or ‘<code class=css>grid:
   0.5fr 0.5fr 0.5fr 0.5fr 1fr "a b b b c"</code>’, etc.)

  <p>For the moment, the specification allows both the ‘<code
   class=property>fr</code>’ and * notations.
   <!--=================================================================-->

  <h4 id=auto-add><span class=secno>11.2.9. </span>Automatically add rows and
   columns</h4>

  <p>The main purpose of grids is to improve on absolute positioning for
   displaying elements in a different visual order. You typically know how
   many positions you need in advance.

  <p>If you don't need to change the visual order, then table layout can
   often align the elements sufficiently.

  <p>However, if table layout isn't possible (there are not enough elements
   in the source to create the necessary table rows, the control over the
   size of table cells is too limited, or you want a column-major table), it
   may be useful to use a grid in a similar manner to a table: the number of
   rows and columns is not specified in the style, but depends on the number
   of elements that are put in the grid.

  <p>E.g., you could transpose a table with an unknown number or rows like
   this:

  <pre>
&lt;TABLE>
 &lt;TR>&lt;TD>A1 &lt;TD>A2 &lt;TD>A3
 &lt;TR>&lt;TD>B1 &lt;TD>B2 &lt;TD>B3
 ...
 &lt;TR>&lt;TD>K1 &lt;TD>K2 &lt;TD>K3
 ...
&lt;/TABLE>
</pre>

  <p>into a tabular display with an unknown number of columns somewhat like
   this:

  <pre>
A1 B1... K1...
A2 B2... K2...
A3 B3... K3...
</pre>

  <p>with style rules like this:

  <pre>
TABLE {grid-template-columns: auto; grid-template-rows: auto}
TD:first-child {grid-area: next 1}
TD {position: grid; grid-area: same next}
</pre>

  <p>This uses keywords instead of numbers, as described in <a
   href="#next-same">“Automatic placement of elements”</a> below.

  <p>What is the size of the added rows and columns? The example above
   assumes the size of the single, specified grid cell is simply repeated.
   There could also be a marker in the list of sizes to indicate which set of
   sizes is repeated. Or there could be a separate property with the list of
   sizes that is repeated for all added rows and columns.

  <p>It would probably be difficult to specify that any number of columns of
   size <var>A</var> can be added, but that the last column must have size
   <var>B</var>…

  <p>The current specification specifies that extra rows and columns are
   added when needed for absolute positioning (‘<code
   class=property>grid-area</code>’). It is not possible to automatically
   create new, anonymous flows. (But sometimes you can use multi-column
   elements to do that, and possibly grid templates can be attached to
   columns, via a ‘<code class=css>::column</code>’) pseudo-element, see
   <a href="#ref-CSS3GCPM"
   rel=biblioentry>[CSS3GCPM]<!--{{CSS3GCPM}}--></a>.)
   <!--=================================================================-->

  <h4 id=rectangular-slots-vs-non-rectangular-slo><span class=secno>11.2.10.
   </span>Rectangular slots vs non-rectangular slots</h4>

  <p>Non-rectangular slots, such as

  <pre>
grid: "a a a"
      "a a ."
      "a . ."
</pre>

  <p>are probably something for level 4. Or maybe the Exclusions module can
   be used instead.
   <!--=================================================================-->

  <h4 id=page-grid><span class=secno>11.2.11. </span>Page grids</h4>

  <p>Typically in magazines, each page has a slightly different layout of
   slots, although they are all based on the same set of columns, usually
   between 3 and 6. It is difficult to specify the grids of all pages as a
   single long grid on the BODY element; and indeed impossible if you don't
   know how many pages use each kind of layout.

  <p>Applying grids to ‘<code class=css>@page</code>’ is an alternative.
   That is what is <a href="#page-templates">specified in this module,</a>
   but it has a few issues:

  <ul>
   <li>We need named paged (‘<code class=css>@page news {…}</code>’), a
    way for an element to say it needs to start on a specific kind of page
    (‘<code class=css>break-before: page(news)</code>’ or ‘<code
    class=css>break-before; always; page: news</code>’), and a way to say
    which style follows which (‘<code class=css>@page news-odd {next:
    news-even}</code>’).

   <li>What happens to footnotes <a href="#ref-CSS3GCPM"
    rel=biblioentry>[CSS3GCPM]<!--{{CSS3GCPM}}--></a>? Each slot probably has
    its own footnote area.

   <li>How are slots on different pages connected? Probably by having the
    same name.
  </ul>
  <!--=================================================================-->

  <h4 id=style-the-slots-pseudo-elements><span class=secno>11.2.12.
   </span>Style the slots (pseudo-elements)</h4>

  <p>Slots can have properties of their own: background, overflow,
   writing-mode, direction, box-shadow, margin, border, padding. What else?

  <p>For ‘<a href="#vertical-align"><code
   class=property>vertical-align</code></a>’, see <a
   href="#vert-align">“Vertical alignment inside slots”</a> below.

  <p>‘<code class=property>Wrap-flow</code>’ (from <a
   href="https://www.w3.org/TR/css3-exclusions/">CSS Exclusions and
   Shapes</a>) could be useful for slots with negative margins, too.
   <!--=================================================================-->

  <h4 id=select-after-pseudo><span class=secno>11.2.13. </span>Style the
   contents of slots (region-based styling)</h4>

  <p>By means of a new pseudo-element, style could be applied to only the
   part of an element that is inside a certain slot (similar to how ‘<code
   class=css>::first-line</code>’ applies style only to the part of an
   element in the first line of a paragraph):

  <pre>P::flow(a) {font-size: large}</pre>

  <p>would be an alternative to

  <pre><a class=index href="#atregion"
   id=atregion1>@region</a> ::slot(a) { P {font-size: large} }</pre>

  <p>The notation with ‘<code class=css>::flow()</code>’ is shorter, and
   more similar to ‘<code class=css>::first-line</code>’ at first sight.
   However, ‘<code class=css>EM::first-line</code>’ does <em>not</em>
   select the part of the EM inside a first line, while ‘<code
   class=css>EM::flow(a)</code>’ <em>would</em> select the part of the EM
   inside slot a. Also, the existence of two pseudo-elements, ‘<code
   class=css>::slot()</code>’ and ‘<code class=css>:flow()</code>’ is
   confusing.

  <p>An alternative is to allow simple selectors after pseudo-elements:

  <pre>::slot(a) P {font-size: large}</pre>

  <p>could select the parts of a P that are rendered inside slot a. That
   would mean that ‘<code class=css>P::first-line EM</code>’ is also
   valid and selects the parts of an EM that are rendered on the first line
   of a P.

  <p>Another possibility might be to set styles on ‘<code
   class=css>::slot()</code>’ itself and only rely on inheritance. (This is
   what is proposed by David Baron in <a href="#ref-CSS-OVERFLOW-3"
   rel=biblioentry>[CSS-OVERFLOW-3]<!--{{CSS-OVERFLOW-3}}--></a>.) Elements
   inside a grid element then inherit from the slot inside which they are,
   before they inherit from the grid element itself.

  <p>Yet another possibility is a generic ‘<code
   class=css>region()</code>’ pseudo-element:

  <pre>P::region(slot(c)) { color: yellow }
EM::region(first-line) { font-weight: normal }</pre>

  <p>Or without the nested parentheses:

  <pre>P::region(slot c) { color: yellow }
EM::region(first-line) { font-weight: normal }</pre>

  <p>The name “region” may not be the best. Some alternatives are:

  <pre>EM::part(first-line) { font-weight: normal }
EM::inside(first-line) { font-weight: normal }
EM::overlap(first-line) { font-weight: normal }</pre>

  <p>And <a href="#ref-CSS-REGIONS-1"
   rel=biblioentry>[CSS-REGIONS-1]<!--{{CSS-REGIONS-1}}--></a> proposes an
   at-rule, ‘<a href="#atregion"><code class=css>@region</code></a>’:

  <pre>@region ::slot(a) {
 P {font-size: large}
}</pre>

  <p>Note that the specificity of the different alternative selectors would
   not be the same. <a href="#ref-CSS-REGIONS-1"
   rel=biblioentry>[CSS-REGIONS-1]<!--{{CSS-REGIONS-1}}--></a> defines that
   the selector immediately after ‘<a href="#atregion"><code
   class=css>@region</code></a>’ does not add specificity. In other words,
   ‘<code class=css>@region div::first-line { em {…} }</code>’ has
   specificity 1, while ‘<code class=css>div::first-line em {...}</code>’
   has specificity 2. ‘<code
   class=css>em::region(div::first-line)</code>’ would have specificity 1
   as well.

  <p>Because the specificity of the selector after ‘<a
   href="#atregion"><code class=css>@region</code></a>’ is not taken into
   account (see <a
   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15734">Bug 15734</a>),
   often only the order of the rules determines which rule is used. With a
   document like this:

  <pre>
&lt;ul class="menu nav">
 &lt;li>…
 &lt;li>…
&lt;/ul>
&lt;ul class="menu">
 &lt;li>…
 &lt;li>…
&lt;/ul>
</pre>

  <p>and a style sheet like this:

  <pre>
ul.menu {grid: ...}
@region ul.menu.nav::slot(a) { li { color: green } }
@region ul.menu::slot(a) { li { color: orange } }
</pre>

  <p>the two color rules apply to the same LIs, but the first, seemingly more
   specific, ‘<a href="#atregion"><code class=css>@region</code></a>’
   rule has no effect. Is this a problem? Authors would have to remember to
   write the above like this instead:

  <pre>
@region ul.menu::slot(a) { ul.nav li { color: green } } /* spec = 12 */
@region ul.menu::slot(a) { li { color: orange } }       /* spec = 1 */
</pre>

  <p>or

  <pre>
@region ul.menu::slot(a) {
  ul.nav li { color: green }  /* spec = 12 */
  li { color: orange }        /* spec = 1 */
}
</pre>

  <p>or

  <pre>
@region ::slot(a) {
  ul.menu.nav li { color: green }  /* spec = 22 */
  ul.menu li { color: orange }     /* spec = 12 */
}
</pre>
  <!--=================================================================-->

  <h4 id=orient-the-grid-with-writing-mode-vs-ori><span class=secno>11.2.14.
   </span>Orient the grid with writing mode vs orient the slots</h4>

  <p>A grid can contain vertical text, but the grid itself doesn't need to be
   rotated or flipped. Indeed, it would be confusing if it did. In other
   words, the following element has vertical text in the top right slot and
   an image in the bottom right slot:

  <pre>
&lt;DIV STYLE="grid: "a *" "a b"; writing-mode: vertical-rl">
 Some text here...
 &lt;IMG STYLE="flow: b"...>
 ...
&lt;/DIV>
</pre>

  <p>In this specification, a grid template is always laid out with the first
   row at the top and the first column on the left. But the slots themselves
   can have a writing mode (by default the one “inherited” from the grid
   element).

  <p>This is different for <em>container elements,</em> i.e., elements with a
   ‘<a href="#display0"><code class=property>display</code></a>’ of ‘<a
   href="#grid"><code class=css>grid</code></a>’ or ‘<code
   class=css>inline-grid</code>’, as those are designed for graphical user
   interfaces, where it is sometimes useful to swap a row of buttons, e.g.,
   in a different language. Grids inside other elements (‘<code
   class=css>block</code>’, ‘<code class=css>list-item</code>’,
   ‘<code class=css>inline-block</code>’, ‘<code
   class=css>table-cell</code>’, etc.) are more likely to depend on the
   orientation of the page (landscape/portrait, recto/verso); but that has to
   be handled explicitly by the designer by means of media queries and
   selectors.
   <!--=================================================================-->

  <h4 id=star-or-at-sign><span class=secno>11.2.15. </span>Indicating the
   default slot (‘<code class=css>*</code>’ vs ‘<code
   class=css>@</code>’)</h4>

  <p>The symbol ‘<code class=css>*</code>’ seems a good choice, as the
   concept of default is somewhat similar to the concept of wildcard. The
   ‘<code class=css>*</code>’ is also used to set the size of rows and
   columns, but the context is probably enough to avoid confusion. (But see
   <a href="#quoted-names">“Quote marks to delimit rows or slot
   names”</a> for a syntax where ‘<code class=css>@</code>’ would be
   better.)
   <!--=================================================================-->

  <h4 id=abspos><span class=secno>11.2.16. </span>Flowing vs absolutely
   positioning content in a grid</h4>

  <p>The most flexible model for positioning content in a grid is to consider
   the slot as a flow, which can contain zero, one or more elements and even
   anonymous content. This is the same concept as a table cell: the cell also
   is a separate flow that can contain several elements as well as anonymous
   content.

  <p>An element inside a slot thus has its size determined as an element in
   normal flow. E.g., if you set a background on it, the background covers
   the element only, not the whole slot. (But the slot has its own background
   property for that.)

  <p>But you may also want to use the grid as a coordinate system for
   absolutely positioned elements, which then overlap with the contents of
   the grid (above or below it, depending on ‘<a href="#z-index"><code
   class=property>z-index</code></a>’).

  <p>And, as <a href="#auto-add">“Automatically add rows and columns”</a>
   above explains, you may want a table-like display of elements that are
   neither absolutely positioned nor flowed, but the table properties aren't
   powerful enough.

  <p>Those two ideas can be added to the grid template model: the declaration
   of the grid is reused, but instead of using ‘<a href="#flow0"><code
   class=property>flow</code></a>’ to position an element into it, the
   element is absolutely positioned on top of it. But unlike the absolute
   positioning in level 2, this positioning is allowed to influence the size
   of the grid element on which it is positioned.

  <p>There are two ideas for how to do this. One idea is to define a special
   kind of unit, ‘<code class=css>gr</code>’, which is only defined for
   elements that have a <a href="#grid-ancestor"><em>grid ancestor,</em></a>
   and which can be used on the ‘<a href="#top"><code
   class=property>top</code></a>’, ‘<a href="#right"><code
   class=property>right</code></a>’, ‘<a href="#bottom"><code
   class=property>bottom</code></a>’ and ‘<a href="#left"><code
   class=property>left</code></a>’, properties of absolutely positioned
   elements. ‘<code class=css>left: 2.25gr</code>’ means the position is
   in the third column, one quarter of the way towards the fourth column.

  <p>Another way is to define a new property ‘<code
   class=property>grid-area</code>’, which, if set, overrides ‘<a
   href="#top"><code class=property>top</code></a>’, ‘<a
   href="#left"><code class=property>left</code></a>’, etc. and which takes
   numbers or names of slots (up to four of them, to set the four sides).

  <p>Yet another way is to extend ‘<a href="#top"><code
   class=property>top</code></a>’, ‘<a href="#left"><code
   class=property>left</code></a>’, etc., with unitless values (meaning the
   n'th grid column or row) and letters (meaning the appropriate edge of the
   slot of that name).
   <!--=================================================================-->

  <h4 id=use-the-pseudo-class-to-create-additiona><span class=secno>11.2.17.
   </span>Use the pseudo-class to create additional slots</h4>

  <p>If you want a flow that overlaps with a grid element (i.e., absolutely
   positioned on top of it), but that flow doesn't correspond to an element
   in the document you could create a pseudo-element that is like an
   “absolutely positioned slot:”

  <pre>DIV::slot(z) {position: grid; grid-area: 2 2}</pre>

  <p>Like other ‘<code class=css>::slot()</code>’ pseudo-elements, it
   applies to <a href="#grid-element.">grid elements</a> only (the DIV in
   this example must be a grid element), but unlike other ‘<code
   class=css>::slot()</code>’ pseudo-elements it doesn't style an existing
   slot, but implicitly creates a new one. (It is some kind of error if the
   name ‘<code class=css>z</code>’ already exists in the grid template.)

  <p>Then you can flow other elements into this slot:

  <pre>.note {flow: z}</pre>

  <p>This mechanism is difficult to understand. Experience shows it is also
   difficult to explain and in a style sheet it is difficult to recognize.
   What are the use cases (that can't be done with negative margins, absolute
   positioning, etc.)? This specification does not allow the creation of
   arbitrary, absolutely positioned pseudo-elements. If needed, it could be
   added in level 4.
   <!--=================================================================-->

  <h4 id=names-for-edges><span class=secno>11.2.18. </span>Names for edges</h4>

  <p>If you position elements absolutely (with ‘<a href="#top"><code
   class=property>top</code></a>’, ‘<a href="#left"><code
   class=property>left</code></a>’, etc. or with ‘<code
   class=property>grid-area</code>’, see <a href="#abspos">“Flowing vs
   absolutely positioning content in a grid”</a> above), you can use
   numbers to refer to grid lines: from ‘<code class=css>1</code>’ (the
   left edge of the first column) to <var>N</var>+1 (the right edge of the
   last column) and ditto for rows. You can also refer to the edges of slots,
   for an extra level of indirection and to avoid the need for numbers.

  <p>It has been suggested to create a mechanism to assign arbitrary names to
   grid lines, even multiple aliases for the same grid line. You could then
   absolutely position an element at grid line ‘<code
   class=css>foo</code>’ (e.g., ‘<code class=css>grid-area: foo
   1</code>’) and later assign that alias ‘<code class=css>foo</code>’
   to a different grid line without having to change the style rules that use
   it. E.g., the following could make the name ‘<code
   class=css>a-line</code>’ an alias for the number 2 and ‘<code
   class=css>b-line</code>’ an alias for the number 4:

  <pre>
/* Create a 7x2 grid template */
DIV {grid-template-columns: * a-line * * b-line * *; grid-template-rows: * *}
/* Put H2 at cell x=4, y=2 */
DIV H2 {position: grid; grid-area: b-line 2}
</pre>

  <p>(This could also use strings instead of identifiers, for even more
   flexible names.)

  <p>This turns out to be very difficult to explain to users, partly because
   of the syntax, partly because of the indirection, which comes on top of
   the inherent indirection that CSS already requires (the style rules are in
   a style sheet, not on the elements they apply to) and the indirection of
   specifying a position by referring to an abstract grid.

  <p>Also, the number of usages of ‘<code
   class=property>grid-area</code>’ (for a given grid) is not likely to be
   so big that a symbolic name for a grid line is necessary. Moreover, this
   is easy to handle with a macro processor.

  <p>This specification does not include a mechanism to assign aliases to
   grid lines.
   <!--=================================================================-->

  <h4 id=position-from-the-right-and-bottom><span class=secno>11.2.19.
   </span>Position from the right and bottom</h4>

  <p>If elements are absolutely positioned relative to a grid (with ‘<a
   href="#top"><code class=property>top</code></a>’, ‘<a
   href="#left"><code class=property>left</code></a>’ or ‘<code
   class=property>grid-area</code>’, see <a href="#abspos">“Flowing vs
   absolutely positioning content in a grid”</a> above), and especially if
   the grid can automatically grow (see <a href="#auto-add">“Automatically
   add rows and columns”</a>) it might be useful to position elements
   relative to the last row or column, independent of how many rows or
   columns the grid element has. That could be done with negative numbers:

  <pre>grid-area: 1 -1</pre>

  <p>This specification does not allow positioning from the end. If uses
   cases are found, it could be added in level 4.
   <!--=================================================================-->

  <h4 id=syntax-features-to-shorten-long-grid-spe><span class=secno>11.2.20.
   </span>Syntax features to shorten long grid specifications</h4>

  <p>Grids are typically very regular (see also <a href="#need-fr">‘<code
   class=css>*</code>’ vs ‘<code class=css>fr</code>’</a> above). E.g.,
   if you specify the margins between slots in the template (rather then with
   a ‘<a href="#margin"><code class=property>margin</code></a>’ property
   on the slots), you often end up with a grid similar to this:

  <pre>grid-template-areas: "a.b.c.d.e.f";
grid-template-columns: * 1em * 1em * 1em * 1em * 1em *</pre>

  <p>Even for the columns of broadsheet newspapers (6–8 columns), that
   still fits easily on one line, even with margins between the columns. But
   if the grid gets even longer, there may be a need for abbreviations, e.g.:

  <pre>grid-template-columns: * repeat(1em *, 5)</pre>

  <p>or

  <pre>grid-template-columns: * (1em *)[5]</pre>

  <p>or

  <pre>grid-template-columns: * (1em *){5}</pre>

  <p>or

  <pre>grid-template-columns: * 5//1em *//</pre>

  <p>This makes the syntax harder to learn and read, though. So it needs some
   good use cases first. This can be postponed to level 4.
   <!--=================================================================-->

  <h4 id=fit-content-vs-auto-vshellip><span class=secno>11.2.21.
   </span>‘<code class=css>fit-content</code>’ vs ‘<code
   class=css>auto</code>’ vs…</h4>

  <p>Column sizes can have an exact size or a minimum and maximum size, by
   means of ‘<code class=css>minmax()</code>’. A common case is probably
   ‘<code class=css>minmax(min-content, max-content)</code>’. (Is that
   really true?) Should that common case have its own keyword? If so, should
   that keyword be ‘<code class=css>fit-content</code>’?

  <p>‘<code class=css>fit-content</code>’ in the Box Module is defined as
   something else, viz., min(max(available width, ‘<code
   class=css>min-content</code>’), ‘<code
   class=css>max-content</code>’)).

  <p>An alternative name could be ‘<code class=css>auto</code>’.
   <!--=================================================================-->

  <h4 id=vert-align><span class=secno>11.2.22. </span>Vertical alignment
   inside slots</h4>

  <p>The content of a slot can be vertically aligned with ‘<a
   href="#vertical-align"><code class=property>vertical-align</code></a>’,
   exactly like the content in table cells. (Despite the name, it would, of
   course, be horizontal alignment if the slot's writing mode was vertical.)

  <p>There could also be a property that applies exclusively to grids
   (grid-slot-align?), or the Flexbox property ‘<code
   class=property>align-content</code>’ can be re-used.

  <p>Looking beyond tables, flex boxes and grids, there is also a need for
   vertical alignment of content in normal blocks (when those blocks have a
   height that does not depend on their contents). There might thus also be a
   new property that applies uniformly to all cases. E.g.: ‘<code
   class=css>block-align: top | bottom | middle | baseline |
   <var>&lt;percentage&gt;</var> | <a
   href="#ltlengthgt"><var>&lt;length&gt;</var></a></code>’, where ‘<code
   class=css>baseline</code>’ simply means ‘<a href="#top"><code
   class=css>top</code></a>’ everywhere outside grids and tables. (A
   separate question is if it would override ‘<a
   href="#vertical-align"><code class=property>vertical-align</code></a>’
   in tables). Or ‘<a href="#vertical-align"><code
   class=property>vertical-align</code></a>’ itself could be generalized to
   apply to all <a href="#block-container"><em>block container</em></a> boxes
   (although the meaning would be ambiguous on ‘<code
   class=css>inline-block</code>’).

  <p>And instead of aligning all the slot's content together as a single
   block by means of ‘<a href="#vertical-align"><code
   class=property>vertical-align</code></a>’, it may also be necessary to
   spread the contents out, e.g., aligning the first paragraph on the
   baseline of the row, but the last paragraph against the bottom of the
   slot. The Box Module <a href="#ref-CSS3BOX"
   rel=biblioentry>[CSS3BOX]<!--{{CSS3BOX}}--></a> proposes elastic margins
   for that (‘<code class=css>margin-top: fill</code>’). Elastic line
   heights may also be possible.

  <p>The present specification just reuses ‘<a href="#vertical-align"><code
   class=property>vertical-align</code></a>’. If a differently named
   property is developed, or other ways to distribute and align contents,
   then whatever interaction they have with ‘<a
   href="#vertical-align"><code class=property>vertical-align</code></a>’
   in tables would apply to slots, too.
   <!--=================================================================-->

  <h4 id=horizontal-alignment-inside-slots><span class=secno>11.2.23.
   </span>Horizontal alignment inside slots</h4>

  <p>Elements can be centered in, or aligned to a side of, their parent with
   ‘<code class=css>auto</code>’ margins. But this doesn't always work:
   for many combinations of ‘<a href="#width"><code
   class=property>width</code></a>’ and ‘<a href="#direction"><code
   class=property>direction</code></a>’, the auto margins are ignored.
   There may thus be a new property (‘<code class=css>justify-content:
   center</code>’?) or value (‘<code class=css>margin: fill</code>’?)
   in the future for correct alignment and centering.

  <p>Or should there be an alignment property that only applies to grid
   slots? ‘<code class=property>grid-slot-align</code>’?

  <p>This specification defines nothing, in the expectation of a general
   solution in the future.
   <!--=================================================================-->

  <h4 id=auto-margins-on-slots><span class=secno>11.2.24. </span>Auto margins
   on slots</h4>

  <p>Do ‘<code class=css>auto</code>’ margins on slots (e.g., ‘<code
   class=css>::slot(a) {margin: auto}</code>’) do anything? Or are they
   simply 0?
   <!--=================================================================-->

  <h4 id=page-floats><span class=secno>11.2.25. </span>Page floats</h4>

  <p><a href="#ref-CSS-PAGE-FLOATS"
   rel=biblioentry>[CSS-PAGE-FLOATS]<!--{{CSS-PAGE-FLOATS}}--></a> defines
   “page floats” (which are slightly misnamed, because they cause floats
   to float not just to the top or bottom of a page, but also to the top or
   bottom of a column in certain contexts). What do they do in slots?

  <p>This specification treats a slot similar to a column, e.g., ‘<code
   class=css>float: top</code>’ means the top of the slot, not of the page.
   Similarly, if slots are chained, then the float modifiers (‘<code
   class=property>float-defer-page</code>’) select the next slot, not the
   next page.
   <!--=================================================================-->

  <h4 id=break-properties><span class=secno>11.2.26. </span>Break-*
   properties</h4>

  <p>The ‘<a href="#break-before"><code
   class=property>break-before</code></a>’, ‘<a href="#break-after"><code
   class=property>break-after</code></a>’ and ‘<a
   href="#break-inside"><code class=property>break-inside</code></a>’
   properties in the draft of February 2012 (see <a href="#ref-CSS-BREAK-3"
   rel=biblioentry>[CSS-BREAK-3]<!--{{CSS-BREAK-3}}--></a>) have keywords
   ‘<a href="#region."><code class=css>region</code></a>’ and ‘<code
   class=css>avoid-region</code>’. Should they be called ‘<a
   href="#slot"><code class=css>slot</code></a>’ and ‘<code
   class=css>avoid-slot</code>’ instead?
   <!--=================================================================-->

  <h4 id=next-same><span class=secno>11.2.27. </span>Automatic placement of
   elements</h4>

  <p>There may be cases where elements are to be placed based on where the
   previous elements was placed, which isn't always expressible with a clever
   selector. An example is placing DD elements in the same slot as the
   preceding DT element. (Note that there may be more than one DD associated
   with a single DT, so a selector such as ‘<code class=css>DT +
   DD</code>’ doesn't work. The selector ‘<code class=css>DT ~
   DD</code>’ doesn't work either, because it selects DDs that belong to
   the next DT, too.).

  <p>A keyword may help: ‘<code class=css>flow: same</code>’.

  <p>In some cases, elements may need to be placed in the next column or row
   after the previous element. If there are cases where rows or columns need
   to be <a href="#auto-add">added automatically based on content,</a> those
   are probably also the cases where element are to be placed in the
   “next” row or column w.r.t. to the preceding element.

  <p>E.g., with a keyword: ‘<code class=css>grid-area: next same</code>’
   (for “next column, same row”).
   <!--=================================================================-->

  <h4 id=the-names-of-the-properties><span class=secno>11.2.28. </span>The
   names of the properties</h4>

  <p>Where this draft has ‘<a href="#flow0"><code
   class=property>flow</code></a>’ for flowing content into a region, the
   Regions draft <a href="#ref-CSS-REGIONS-1"
   rel=biblioentry>[CSS-REGIONS-1]<!--{{CSS-REGIONS-1}}--></a> (version of
   August 2012) proposes ‘<code class=property>flow-into</code>’. It's
   more descriptive, but longer.
   <!--=================================================================-->

  <h2 id=conformance><span class=secno>12. </span>Conformance</h2>
  <!--begin-conformance-->

  <h3 class=no-ref id=conventions> Document conventions</h3>

  <p>Conformance requirements are expressed with a combination of descriptive
   assertions and RFC 2119 terminology. The key words “MUST”, “MUST
   NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
   “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
   normative parts of this document are to be interpreted as described in RFC
   2119. However, for readability, these words do not appear in all uppercase
   letters in this specification.

  <p>All of the text of this specification is normative except sections
   explicitly marked as non-normative, examples, and notes. <a
   href="#ref-RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>

  <p>Examples in this specification are introduced with the words “for
   example” or are set apart from the normative text with
   <code>class="example"</code>, like this:

  <div class=example>
   <p>This is an example of an informative example.
  </div>

  <p>Informative notes begin with the word “Note” and are set apart from
   the normative text with <code>class="note"</code>, like this:

  <p class=note>Note, this is an informative note.

  <h3 class=no-ref id=conformance-classes> Conformance classes</h3>

  <p>Conformance to this specification is defined for three conformance
   classes:

  <dl>
   <dt><dfn id=style-sheet title="style sheet!!as conformance class">style
    sheet</dfn>

   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
    style sheet</a>.

   <dt><dfn id=renderer>renderer</dfn>

   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
    that interprets the semantics of a style sheet and renders documents that
    use them.

   <dt><dfn id=authoring-tool>authoring tool</dfn>

   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
    that writes a style sheet.
  </dl>

  <p>A style sheet is conformant to this specification if all of its
   statements that use syntax defined in this module are valid according to
   the generic CSS grammar and the individual grammars of each feature
   defined in this module.

  <p>A renderer is conformant to this specification if, in addition to
   interpreting the style sheet as defined by the appropriate specifications,
   it supports all the features defined by this specification by parsing them
   correctly and rendering the document accordingly. However, the inability
   of a UA to correctly render a document due to limitations of the device
   does not make the UA non-conformant. (For example, a UA is not required to
   render color on a monochrome monitor.)

  <p>An authoring tool is conformant to this specification if it writes style
   sheets that are syntactically correct according to the generic CSS grammar
   and the individual grammars of each feature in this module, and meet all
   other conformance requirements of style sheets as described in this
   module.

  <h3 class=no-ref id=partial> Partial implementations</h3>

  <p>So that authors can exploit the forward-compatible parsing rules to
   assign fallback values, CSS renderers <strong>must</strong> treat as
   invalid (and <a
   href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as
   appropriate</a>) any at-rules, properties, property values, keywords, and
   other syntactic constructs for which they have no usable level of support.
   In particular, user agents <strong>must not</strong> selectively ignore
   unsupported component values and honor supported values in a single
   multi-value property declaration: if any value is considered invalid (as
   unsupported values must be), CSS requires that the entire declaration be
   ignored.

  <h3 class=no-ref id=experimental> Experimental implementations</h3>

  <p>To avoid clashes with future CSS features, the CSS 2.1 specification
   reserves a <a
   href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
   syntax</a> for proprietary and experimental extensions to CSS.

  <p>Prior to a specification reaching the Candidate Recommendation stage in
   the W3C process, all implementations of a CSS feature are considered
   experimental. The CSS Working Group recommends that implementations use a
   vendor-prefixed syntax for such features, including those in W3C Working
   Drafts. This avoids incompatibilities with future changes in the draft.

  <h3 class=no-ref id=testing> Non-experimental implementations</h3>

  <p>Once a specification reaches the Candidate Recommendation stage,
   non-experimental implementations are possible, and implementors should
   release an unprefixed implementation of any CR-level feature they can
   demonstrate to be correctly implemented according to spec.

  <p>To establish and maintain the interoperability of CSS across
   implementations, the CSS Working Group requests that non-experimental CSS
   renderers submit an implementation report (and, if necessary, the
   testcases used for that implementation report) to the W3C before releasing
   an unprefixed implementation of any CSS features. Testcases submitted to
   W3C are subject to review and correction by the CSS Working Group.

  <p>Further information on submitting testcases and implementation reports
   can be found from on the CSS Working Group's website at <a
   href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
   Questions should be directed to the <a
   href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
   mailing list.
   <!--end-conformance--><!--=================================================================-->

  <h2 id=changes><span class=secno>13. </span>Changes</h2>

  <p>Summary of major changes since the <a
   href="https://www.w3.org/TR/2011/WD-css3-layout-20111129/">29 November
   2011 draft:</a>

  <ul>
   <li>Added a <a href="#accessibility">note about accessibility.</a>

   <li>Instead of directly on ‘<a href="#display0"><code
    class=property>display</code></a>’, the grid template is now specified
    with a new property, ‘<a href="#grid"><code
    class=property>grid</code></a>’, to be consistent with ‘<a
    href="#columns0"><code class=property>columns</code></a>’ in the
    multi-column specification <a href="#ref-CSS3COL"
    rel=biblioentry>[CSS3COL]<!--{{CSS3COL}}--></a>, and also to allow the
    grid to be a shorthand for more primitive properties: ‘<a
    href="#grid-template-areas"><code
    class=property>grid-template-areas</code></a>’, ‘<a
    href="#grid-template-rows"><code
    class=property>grid-template-rows</code></a>’ and ‘<a
    href="#grid-template-columns"><code
    class=property>grid-template-columns</code></a>’.

   <li>Similarly, the flow that an element goes into is now specified with a
    separate ‘<a href="#flow0"><code class=property>flow</code></a>’
    property, rather than the ‘<a href="#position"><code
    class=property>position</code></a>’ property, which retains its
    character as specifying the kind of positioning, rather than the position
    itself.

   <li>Replaced @ by * to indicate the default slot. The asterisk looks
    better and may also be easier to remember, because of its association
    with the notion of “wild card.”

   <li>Slot names are not restricted to single letters, but may be
    identifiers.

   <li>Removed the ‘<code class=css>fr</code>’ unit as a means to
    absolutely position elements on a grid.

   <li>Added a different kind of ‘<code class=css>fr</code>’ unit as an
    alternative to * on row and column sizes, borrowed from <a
    href="#ref-CSS-GRID-1"
    rel=biblioentry>[CSS-GRID-1]<!--{{CSS-GRID-1}}--></a>.

   <li>The ‘<a href="#content1"><code class=property>content</code></a>’
    property is now allowed on slots analogously to how it is allowed on
    ‘<code class=css>before</code>’ and ‘<code
    class=css>after</code>’ pseudo-elements and on margin boxes. One effect
    of this is that slots in page-based templates can be used for running
    headers.

   <li>The margin properties are now allowed on slots. This allows, e.g.,
    slots to overlap by means of negative margins.

   <li>Different set of constraints and a different function to optimize when
    calculating the size of rows and columns: the row heights and column
    widths are now considered together, which should guarantee that the
    overall size of the grid element is as small as possible in all cases and
    also makes the handling of width and height symmetric.

   <li>References to ‘<code class=css>page-break-*</code>’ properties and
    to <a href="#ref-CSS3PAGE"
    rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a> have been replaced with
    references to ‘<code class=css>break-*</code>’ properties and the new
    <a href="#ref-CSS-BREAK-3"
    rel=biblioentry>[CSS-BREAK-3]<!--{{CSS-BREAK-3}}--></a> module.

   <li>Now allows <var>&lt;percentage&gt;</var> on ‘<a
    href="#vertical-align"><code class=property>vertical-align</code></a>’.

   <li>Generalized the text for ‘<a href="#vertical-align"><code
    class=property>vertical-align</code></a>’ to apply to all writing
    modes.

   <li>Added the <em>blank() pseudo-element</em> to be able to select and
    style slots that, for whatever reason, have nothing flowed into them.

   <li>Added a placeholder section for a stack-of-cards layout model.

   <li>Added an (incomplete) <a href="#region-based">section on region-based
    styling.</a>

   <li>Expanded the History section with discussions of alternative syntaxes,
    models and names.
  </ul>
  <!--=================================================================-->

  <h2 class=no-num id=acknowledgments>Acknowledgments</h2>

  <p>The first ideas for describing a template in CSS date from 1996 and are
   described in <a href="https://www.w3.org/TR/NOTE-layout"><cite>Frame-based
   layout via Style Sheets</cite></a> by Bert Bos, Dave Raggett and Håkon
   Wium Lie. The idea was revived in 2005 on the request of W3C's Device
   Independence Working Group and benefited especially from discussions with
   Rhys Lewis and Rotan Hanrahan from that group.

  <p>This specification was further influenced by ideas about form layout by
   <a
   href="https://lists.w3.org/Archives/Member/w3c-css-wg/2002JulSep/0077.html">
   Dave Raggett [member-only link]</a> and an early write-up of the features
   of <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL">
   XUL</a> by <a
   href="https://lists.w3.org/Archives/Member/w3c-css-wg/2002JanMar/0432.html">
   Ian Hickson [member-only link].</a>

  <p><a href="http://stuffandnonsense.co.uk/about">Andy Clarke,</a> <a
   href="http://sushiandrobots.com/about">Jina Bolton</a> and <a
   href="http://lawver.net/">Kevin Lawver</a> provided use cases, examples
   and requirements. The analysis in the <a href="#history">History</a>
   section is a slightly shortened version of work by Steve Zilles.

  <p>César Acebal built the first prototype, see <a href="#ref-ACEBAL2012"
   rel=biblioentry>[ACEBAL2012]<!--{{ACEBAL2012}}--></a>. Andrew Fedoniouk
   built <a
   href="http://lists.w3.org/Archives/Public/www-style/2009Mar/0278.html">the
   second.</a> A <a
   href="http://lists.w3.org/Archives/Public/www-style/2009Apr/0383.html">third
   prototype</a> was made by Alexis Deveria. The <a
   href="http://github.com/acebal/ALMcss3">fourth prototype, ALMcss3,</a> was
   again made by César Acebal.
   <!--=================================================================-->

  <h2 class=no-num id=references>References</h2>

  <p id=normative-references>Normative references: <!--begin-normative-->
   <!-- Sorted by label -->

  <dl class=bibliography>
   <dd style="display: none"><!-- keeps the doc valid if the DL is empty -->
    <!---->

   <dt id=ref-CSS-BREAK-3>[CSS-BREAK-3]

   <dd>Rossen Atanassov; Elika J. Etemad / fantasai. <a
    href="http://www.w3.org/TR/2016/CR-css-break-3-20160114/"><cite>CSS
    Fragmentation Module Level 3.</cite></a> 14 January 2016. W3C Candidate
    Recommendation. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2016/CR-css-break-3-20160114/">http://www.w3.org/TR/2016/CR-css-break-3-20160114/</a>
   </dd>
   <!---->

   <dt id=ref-CSS-GRID-1>[CSS-GRID-1]

   <dd>Tab Atkins Jr.; Elika J. Etemad / fantasai; Rossen Atanassov. <a
    href="http://www.w3.org/TR/2015/WD-css-grid-1-20150917/"><cite>CSS Grid
    Layout Module Level 1.</cite></a> 17 September 2015. W3C Working Draft.
    (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2015/WD-css-grid-1-20150917/">http://www.w3.org/TR/2015/WD-css-grid-1-20150917/</a>
   </dd>
   <!---->

   <dt id=ref-CSS-REGIONS-1>[CSS-REGIONS-1]

   <dd>Rossen Atanassov; Alan Stearns. <a
    href="http://www.w3.org/TR/2014/WD-css-regions-1-20141009/"><cite>CSS
    Regions Module Level 1.</cite></a> 9 October 2014. W3C Working Draft.
    (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2014/WD-css-regions-1-20141009/">http://www.w3.org/TR/2014/WD-css-regions-1-20141009/</a>
   </dd>
   <!---->

   <dt id=ref-CSS-TEXT-3>[CSS-TEXT-3]

   <dd>Elika J. Etemad; Koji Ishii. <a
    href="http://www.w3.org/TR/2013/WD-css-text-3-20131010/"><cite>CSS Text
    Module Level 3.</cite></a> 10 October 2013. W3C Last Call Working Draft.
    (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2013/WD-css-text-3-20131010/">http://www.w3.org/TR/2013/WD-css-text-3-20131010/</a>
   </dd>
   <!---->

   <dt id=ref-CSS-WRITING-MODES-3>[CSS-WRITING-MODES-3]

   <dd>Elika J. Etemad / fantasai; Koji Ishii. <a
    href="http://www.w3.org/TR/2015/CR-css-writing-modes-3-20151215/"><cite>CSS
    Writing Modes Level 3.</cite></a> 15 December 2015. W3C Candidate
    Recommendation. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2015/CR-css-writing-modes-3-20151215/">http://www.w3.org/TR/2015/CR-css-writing-modes-3-20151215/</a>
   </dd>
   <!---->

   <dt id=ref-CSS21>[CSS21]

   <dd>Bert Bos; et al. <a
    href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
    Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
    2011. W3C Recommendation. URL: <a
    href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
   </dd>
   <!---->

   <dt id=ref-CSS3BOX>[CSS3BOX]

   <dd>Bert Bos. <a
    href="http://www.w3.org/TR/2007/WD-css3-box-20070809"><cite>CSS basic box
    model.</cite></a> 9 August 2007. W3C Working Draft. (Work in progress.)
    URL: <a
    href="http://www.w3.org/TR/2007/WD-css3-box-20070809">http://www.w3.org/TR/2007/WD-css3-box-20070809</a>
   </dd>
   <!---->

   <dt id=ref-CSS3CASCADE>[CSS3CASCADE]

   <dd>Elika J. Etemad; Tab Atkins Jr. <a
    href="http://www.w3.org/TR/2015/CR-css-cascade-3-20150416/"><cite>CSS
    Cascading and Inheritance Level 3.</cite></a> 16 April 2015. W3C
    Candidate Recommendation. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2015/CR-css-cascade-3-20150416/">http://www.w3.org/TR/2015/CR-css-cascade-3-20150416/</a>
   </dd>
   <!---->

   <dt id=ref-CSS3GENCON>[CSS3GENCON]

   <dd>Ian Hickson. <a
    href="http://www.w3.org/TR/2003/WD-css3-content-20030514"><cite>CSS3
    Generated and Replaced Content Module.</cite></a> 14 May 2003. W3C
    Working Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2003/WD-css3-content-20030514">http://www.w3.org/TR/2003/WD-css3-content-20030514</a>
   </dd>
   <!---->

   <dt id=ref-CSS3PAGE>[CSS3PAGE]

   <dd>Melinda Grant; et al. <a
    href="http://www.w3.org/TR/2013/WD-css3-page-20130314/"><cite>CSS Paged
    Media Module Level 3.</cite></a> 14 March 2013. W3C Working Draft. (Work
    in progress.) URL: <a
    href="http://www.w3.org/TR/2013/WD-css3-page-20130314/">http://www.w3.org/TR/2013/WD-css3-page-20130314/</a>
   </dd>
   <!---->

   <dt id=ref-CSS3POS>[CSS3POS]

   <dd>Bert Bos. <cite>CSS3 Positioning Module.</cite> (forthcoming). W3C
    Working Draft. (Work in progress.)</dd>
   <!---->

   <dt id=ref-CSS3SYN>[CSS3SYN]

   <dd>Tab Atkins Jr.; Simon Sapin. <a
    href="http://www.w3.org/TR/2014/CR-css-syntax-3-20140220/"><cite>CSS
    Syntax Module Level 3.</cite></a> 20 February 2014. W3C Candidate
    Recommendation. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2014/CR-css-syntax-3-20140220/">http://www.w3.org/TR/2014/CR-css-syntax-3-20140220/</a>
   </dd>
   <!---->

   <dt id=ref-CSS3TBL>[CSS3TBL]

   <dd>Bert Bos; David Hyatt. <cite>CSS3 Tables Module.</cite> (forthcoming).
    W3C Working Draft. (Work in progress.)</dd>
   <!---->

   <dt id=ref-CSS3VAL>[CSS3VAL]

   <dd>Tab Atkins; fantasai. <a
    href="http://www.w3.org/TR/2015/CR-css-values-3-20150611/"><cite>CSS
    Values and Units Module Level 3.</cite></a> 11 June 2015. W3C Candidate
    Recommendation. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2015/CR-css-values-3-20150611/">http://www.w3.org/TR/2015/CR-css-values-3-20150611/</a>
   </dd>
   <!---->

   <dt id=ref-RFC2119>[RFC2119]

   <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
    words for use in RFCs to Indicate Requirement Levels.</cite></a> RFC
    2119. URL: <a
    href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
   </dd>
   <!---->
  </dl>
  <!--end-normative-->

  <p id=other-references>Other references: <!--begin-informative-->
   <!-- Sorted by label -->

  <dl class=bibliography>
   <dd style="display: none"><!-- keeps the doc valid if the DL is empty -->
    <!---->

   <dt id=ref-ACEBAL2010>[ACEBAL2010]

   <dd>César Fernández Acebal. <a
    href="http://di002.edv.uniovi.es/~acebal/phd/dissertation.pdf"><cite>ALMcss:
    Separación de estructura y presentación en la web mediante
    posicionamiento avanzado en CSS.</cite></a> 2010. Oviedo, Spain. PhD
    thesis URL: <a
    href="http://di002.edv.uniovi.es/~acebal/phd/dissertation.pdf">http://di002.edv.uniovi.es/~acebal/phd/dissertation.pdf</a>
   </dd>
   <!---->

   <dt id=ref-ACEBAL2012>[ACEBAL2012]

   <dd>César Acebal; et al. “ALMcss: a Javascript implementation of the
    CSS template layout module” in: <cite>Proceedings of the 2012 ACM
    symposium on Document Engineering.</cite> ACM. September 2012. New York,
    NY, USA. ISBN 978-1-4503-1116-8</dd>
   <!---->

   <dt id=ref-CSS-OVERFLOW-3>[CSS-OVERFLOW-3]

   <dd>L. David Baron. <a
    href="http://www.w3.org/TR/2013/WD-css-overflow-3-20130418/"><cite>CSS
    Overflow Module Level 3.</cite></a> 18 April 2013. W3C First Public
    Working Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2013/WD-css-overflow-3-20130418/">http://www.w3.org/TR/2013/WD-css-overflow-3-20130418/</a>
   </dd>
   <!---->

   <dt id=ref-CSS-PAGE-FLOATS>[CSS-PAGE-FLOATS]

   <dd>Håkon Wium Lie. <cite>CSS Page Floats.</cite> (forthcoming). W3C
    Working Draft. (Work in progress)</dd>
   <!---->

   <dt id=ref-CSS-UI-3>[CSS-UI-3]

   <dd>Tantek Çelik; Florian Rivoal. <a
    href="http://www.w3.org/TR/2015/CR-css-ui-3-20150707/"><cite>CSS Basic
    User Interface Module Level 3 (CSS3 UI).</cite></a> 7 July 2015. W3C
    Candidate Recommendation. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2015/CR-css-ui-3-20150707/">http://www.w3.org/TR/2015/CR-css-ui-3-20150707/</a>
   </dd>
   <!---->

   <dt id=ref-CSS3-EXCLUSIONS>[CSS3-EXCLUSIONS]

   <dd>Rossen Atanassov; Vincent Hardy; Alan Stearns. <a
    href="http://www.w3.org/TR/2015/WD-css3-exclusions-20150115/"><cite>CSS
    Exclusions Module Level 1.</cite></a> 15 January 2015. W3C Working Draft.
    (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2015/WD-css3-exclusions-20150115/">http://www.w3.org/TR/2015/WD-css3-exclusions-20150115/</a>
   </dd>
   <!---->

   <dt id=ref-CSS3-FLEXBOX>[CSS3-FLEXBOX]

   <dd>Tab Atkins Jr.; fantasai; Rossen Atanassov. <a
    href="http://www.w3.org/TR/2015/WD-css-flexbox-1-20150514/"><cite>CSS
    Flexible Box Layout Module Level 1.</cite></a> 14 May 2015. W3C Last Call
    Working Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2015/WD-css-flexbox-1-20150514/">http://www.w3.org/TR/2015/WD-css-flexbox-1-20150514/</a>
   </dd>
   <!---->

   <dt id=ref-CSS3BG>[CSS3BG]

   <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a
    href="http://www.w3.org/TR/2014/CR-css3-background-20140909/"><cite>CSS
    Backgrounds and Borders Module Level 3.</cite></a> 9 September 2014. W3C
    Candidate Recommendation. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2014/CR-css3-background-20140909/">http://www.w3.org/TR/2014/CR-css3-background-20140909/</a>
   </dd>
   <!---->

   <dt id=ref-CSS3COL>[CSS3COL]

   <dd>Håkon Wium Lie. <a
    href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412"><cite>CSS
    Multi-column Layout Module.</cite></a> 12 April 2011. W3C Candidate
    Recommendation. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412">http://www.w3.org/TR/2011/CR-css3-multicol-20110412</a>
   </dd>
   <!---->

   <dt id=ref-CSS3COLOR>[CSS3COLOR]

   <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a
    href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color
    Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a
    href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a>
   </dd>
   <!---->

   <dt id=ref-CSS3GCPM>[CSS3GCPM]

   <dd>Dave Cramer. <a
    href="http://www.w3.org/TR/2014/WD-css-gcpm-3-20140513/"><cite>CSS
    Generated Content for Paged Media Module.</cite></a> 13 May 2014. W3C
    Working Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2014/WD-css-gcpm-3-20140513/">http://www.w3.org/TR/2014/WD-css-gcpm-3-20140513/</a>
   </dd>
   <!---->

   <dt id=ref-CSS3GRID>[CSS3GRID]

   <dd>Alex Mogilevsky; Markus Mielke. <a
    href="http://www.w3.org/TR/2007/WD-css3-grid-20070905"><cite>CSS Grid
    Positioning Module Level 3.</cite></a> 5 September 2007. W3C Working
    Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2007/WD-css3-grid-20070905">http://www.w3.org/TR/2007/WD-css3-grid-20070905</a>
   </dd>
   <!---->

   <dt id=ref-MEDIAQ>[MEDIAQ]

   <dd>Florian Rivoal. <a
    href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/"><cite>Media
    Queries.</cite></a> 19 June 2012. W3C Recommendation. URL: <a
    href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/">http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/</a>
   </dd>
   <!---->

   <dt id=ref-SELECT>[SELECT]

   <dd>Tantek Çelik; et al. <a
    href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/"><cite>Selectors
    Level 3.</cite></a> 29 September 2011. W3C Recommendation. URL: <a
    href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/">http://www.w3.org/TR/2011/REC-css3-selectors-20110929/</a>
   </dd>
   <!---->

   <dt id=ref-WCAG20>[WCAG20]

   <dd>Ben Caldwell; et al. <a
    href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/"><cite>Web Content
    Accessibility Guidelines (WCAG) 2.0.</cite></a> 11 December 2008. W3C
    Recommendation. URL: <a
    href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/">http://www.w3.org/TR/2008/REC-WCAG20-20081211/</a>
   </dd>
   <!---->
  </dl>
  <!--end-informative-->
  <!--=================================================================-->

  <h2 class="no-num heading settled" id="privacy"><span class="content">Privacy Considerations</span><a class="self-link" href="#privacy"></a></h2>
  <p>No new privacy considerations have been reported on this specification.</p>
  <h2 class="no-num heading settled" id="security"><span class="content">Security Considerations</span><a class="self-link" href="#security"></a></h2>
  <p>No new security considerations have been reported on this specification.</p>

  <h2 class=no-num id=index>Index</h2>
  <!--begin-index-->

  <ul class=indexlist>
   <li>A edge, <a href="#a-edge"
    title="section 8.1."><strong>8.1.</strong></a>

   <li>anonymous block of a slot, <a href="#anonymous-block"
    title="section 3.7."><strong>3.7.</strong></a>

   <li>authoring tool, <a href="#authoring-tool"
    title="section 12."><strong>12.</strong></a>

   <li>background, <a href="#background"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>background-image, <a href="#background-image"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>background-size, <a href="#background-size"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>blank
    <ul>
     <li>pseudo-element, <a href="#blank-pseudo-element"
      title="section 6.2."><strong>6.2.</strong></a>
    </ul>

   <li>block container,, <a href="#block-container"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>block flow direction, <a href="#block-flow-direction"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>bottom, <a href="#bottom"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>box-decoration-break, <a href="#box-decoration-break"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>box-shadow, <a href="#box-shadow"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>break-after, <a href="#break-after"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>break-before, <a href="#break-before"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>break-inside, <a href="#break-inside"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>card, <a href="#cards" title="section 2."><strong>2.</strong></a>

   <li>C edge, <a href="#c-edge"
    title="section 8.1."><strong>8.1.</strong></a>

   <li>chain., <a href="#chain."
    title="section 10."><strong>10.</strong></a>, <a href="#chained-regions"
    title="section 1.1.">1.1.</a>

   <li>chains, <a href="#chains0"
    title="section 10."><strong>10.</strong></a>, <a href="#chains1"
    title="section 1.1.">1.1.</a>

   <li>columns, <a href="#columns0"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>&lt;col-width&gt;, <a href="#ltcol-widthgt"
    title="section 3.2."><strong>3.2.</strong></a>

   <li>containing block, <a href="#containing-block"
    title="section 3.7.">3.7.</a>, <a href="#containing-block0"
    title="section 4.">4.</a>, <a href="#containing-block1"
    title="section 4.">4.</a>, <a href="#containing-block2"
    title="section 8.4.">8.4.</a>

   <li>content,, <a href="#content0"
    title="section 1.2."><strong>1.2.</strong></a>, <a href="#content1"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>‘<code class=css>contents</code>’, <a href="#contents0"
    title="section 6.3."><strong>6.3.</strong></a>

   <li>default slot., <a href="#default-slot."
    title="section 3.5."><strong>3.5.</strong></a>

   <li>direction, <a href="#direction"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>display, <a href="#display0"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>element-based template., <a href="#element-based-template."
    title="section 9."><strong>9.</strong></a>

   <li>field (of a typographical grid), <a href="#fields"
    title="section 1.1.">1.1.</a>

   <li>float, <a href="#float" title="section 1.2."><strong>1.2.</strong></a>

   <li>flow, <a href="#flow0" title="section 4."><strong>4.</strong></a>

   <li>flow line, <a href="#flow-lines." title="section 1.1.">1.1.</a>

   <li>fragmenter, <a href="#fragmenter"
    title="section 1.2."><strong>1.2.</strong></a>, <a href="#fragmenter0"
    title="section 8.2.">8.2.</a>, <a href="#fragmenter1"
    title="section 10.">10.</a>

   <li>grid, <a href="#grid" title="section 3.4."><strong>3.4.</strong></a>,
    <a href="#grid0" title="section 1.1.">1.1.</a>

   <li>grid ancestor, <a href="#grid-ancestor"
    title="section 3."><strong>3.</strong></a>

   <li>grid-auto-columns, <a href="#grid-auto-columns"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>grid-auto-flow, <a href="#grid-auto-flow"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>grid-auto-rows, <a href="#grid-auto-rows"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>grid container, <a href="#grid-container"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>grid element., <a href="#grid-element."
    title="section 3."><strong>3.</strong></a>

   <li>grid-template, <a href="#grid-template0"
    title="section 3.4."><strong>3.4.</strong></a>

   <li>grid-template-areas, <a href="#grid-template-areas"
    title="section 3.1."><strong>3.1.</strong></a>

   <li>grid-template-columns, <a href="#grid-template-columns"
    title="section 3.2."><strong>3.2.</strong></a>

   <li>grid-template-rows, <a href="#grid-template-rows"
    title="section 3.3."><strong>3.3.</strong></a>

   <li>height, <a href="#height"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>horizontal, <a href="#horizontal-element."
    title="section 1.2."><strong>1.2.</strong></a>

   <li>horizontal element, <a href="#horizontal-element."
    title="section 1.2."><strong>1.2.</strong></a>

   <li>horizontal writing mode, <a href="#horizontal-writing-mode"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>implicit template, <a href="#implicit-template"
    title="section 3.1."><strong>3.1.</strong></a>

   <li>inherit,, <a href="#inherit"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>‘<code class=css>inhibit</code>’, <a href="#inhibit"
    title="section 6.3."><strong>6.3.</strong></a>

   <li>initial, <a href="#initial"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>interactive, <a href="#interactive"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>intrinsic minimum, <a href="#intrinsic-minimum"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>intrinsic preferred, <a href="#intrinsic-preferred"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>left, <a href="#left" title="section 1.2."><strong>1.2.</strong></a>

   <li><var>&lt;length&gt;</var>, <a href="#ltlengthgt"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>margin, <a href="#margin"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>margin-left, <a href="#margin-left"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>margin-right, <a href="#margin-right"
    title="section 1.2."><strong>1.2.</strong></a>

   <li><var>MINH</var>, <a href="#minh"
    title="section 3.7."><strong>3.7.</strong></a>

   <li>&lt;minmax&gt;, <a href="#ltminmaxgt"
    title="section 3.2."><strong>3.2.</strong></a>, <a href="#ltminmaxgt0"
    title="section 3.3."><strong>3.3.</strong></a>

   <li><var>MINW</var>, <a href="#minw"
    title="section 3.7."><strong>3.7.</strong></a>

   <li>module (of a typographical grid), <a href="#module"
    title="section 1.1.">1.1.</a>

   <li>‘<code class=css>none</code>’, <a href="#none"
    title="section 6.3."><strong>6.3.</strong></a>

   <li>non-interactive, <a href="#non-interactive"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>‘<code class=css>normal</code>’, <a href="#normal"
    title="section 6.3."><strong>6.3.</strong></a>

   <li>number of columns, <a href="#number-of-columns"
    title="section 3."><strong>3.</strong></a>

   <li>number of rows, <a href="#number-of-rows"
    title="section 3."><strong>3.</strong></a>

   <li>overflow, <a href="#overflow"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>page area, <a href="#page-area"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>page-based template, <a href="#page-based-template"
    title="section 9."><strong>9.</strong></a>

   <li>position, <a href="#position"
    title="section 1.2."><strong>1.2.</strong></a>

   <li><var>PREFH</var>, <a href="#prefh"
    title="section 3.7."><strong>3.7.</strong></a>

   <li><var>PREFW</var>, <a href="#prefw"
    title="section 3.7."><strong>3.7.</strong></a>

   <li>region., <a href="#region."
    title="section 1.2."><strong>1.2.</strong></a>
    <ul>
     <li>disconnected, <a href="#non-rectangular-and-disconnected-regions"
      title="section 3.1.">3.1.</a>

     <li>non-rectangular, <a href="#non-rectangular-and-disconnected-regions"
      title="section 3.1.">3.1.</a>
    </ul>

   <li>@region, <a href="#atregion"
    title="section 1.2."><strong>1.2.</strong></a>, <a href="#atregion0"
    title="section 1.1.">1.1.</a>, <a href="#atregion1"
    title="section 11.2.13.">11.2.13.</a>

   <li>Region-based styling, <a href="#region-based-styling"
    title="section 7."><strong>7.</strong></a>

   <li>renderer, <a href="#renderer"
    title="section 12."><strong>12.</strong></a>

   <li>right, <a href="#right" title="section 1.2."><strong>1.2.</strong></a>

   <li>&lt;row-height&gt;, <a href="#ltrow-heightgt"
    title="section 3.3."><strong>3.3.</strong></a>

   <li>slot, <a href="#slot" title="section 3.1."><strong>3.1.</strong></a>
    <ul>
     <li>pseudo-element, <a href="#s1" title="section 7.">7.</a>, <a
      href="#slot-pseudo-element."
      title="section 6.1."><strong>6.1.</strong></a>
    </ul>

   <li>slots., <a href="#slots." title="section 7.">7.</a>

   <li>spatial zone, <a href="#spatial-zones." title="section 1.1.">1.1.</a>

   <li>stacking context., <a href="#stacking-context."
    title="section 1.2."><strong>1.2.</strong></a>

   <li><var>&lt;string&gt;</var>, <a href="#ltstringgt"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>style sheet
    <ul>
     <li>as conformance class, <a href="#style-sheet"
      title="section 12."><strong>12.</strong></a>
    </ul>

   <li>tab, <a href="#tab" title="section 2."><strong>2.</strong></a>

   <li>top, <a href="#top" title="section 1.2."><strong>1.2.</strong></a>

   <li>unit (of a typographical grid), <a href="#unit"
    title="section 1.1.">1.1.</a>

   <li>unset., <a href="#unset."
    title="section 1.2."><strong>1.2.</strong></a>

   <li>vertical, <a href="#vertical-element"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>vertical-align, <a href="#vertical-align"
    title="section 1.2."><strong>1.2.</strong></a>, <a
    href="#vertical-align0" title="section 1.1.">1.1.</a>, <a
    href="#vertical-align1" title="section 1.1.">1.1.</a>, <a
    href="#vertical-align2" title="section 8.1.">8.1.</a>, <a
    href="#vertical-align3" title="section 10.">10.</a>, <a
    href="#vertically-align" title="section 3.7.">3.7.</a>

   <li>vertical element, <a href="#vertical-element"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>vertical writing mode, <a href="#vertical-writing-mode"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>width, <a href="#width" title="section 1.2."><strong>1.2.</strong></a>

   <li>word-spacing, <a href="#word-spacing"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>writing-mode, <a href="#writing-mode"
    title="section 1.2."><strong>1.2.</strong></a>

   <li>z-index, <a href="#z-index"
    title="section 1.2."><strong>1.2.</strong></a>
  </ul>
  <!--end-index-->
  <!--=================================================================-->

  <h2 class=no-num id=property-index>Property index</h2>
  <!--begin-properties-->

  <table class=proptable>
   <thead>
    <tr>
     <th>Property

     <th>Values

     <th>Initial

     <th>Applies to

     <th>Inh.

     <th>Percentages

     <th>Media

   <tbody>
    <tr>
     <th><a class=property href="#chains0">chains</a>

     <td>none | &lt;identifier&gt;+ [ , &lt;identifier&gt;+ ]*

     <td>none

     <td>grid elements

     <td>no

     <td>N/A

     <td>visual

    <tr>
     <th><a class=property href="#flow0">flow</a>

     <td>auto | &lt;identifier&gt; | &lt;string&gt; | ‘*’ | same

     <td>auto

     <td>elements that have a grid ancestor and whose ‘position’ is
      ‘static’ or ‘relative’

     <td>no

     <td>N/A

     <td>visual

    <tr>
     <th><a class=property href="#grid">grid</a>

     <td>&lt;‘grid-template’&gt; | &lt;‘grid-auto-flow’&gt; [
      &lt;‘grid-auto-columns’&gt; [ / &lt;‘grid-auto-rows’&gt; ]? ]

     <td>See individual properties

     <td>block container elements and grid container elements

     <td>no

     <td>see individual properties

     <td>visual

    <tr>
     <th><a class=property href="#grid-template0">grid-template</a>

     <td>none | &lt;col-width&gt;* [ [ &lt;string&gt; &lt;row-height&gt;? ]+
      | ‘/’ &lt;row-height&gt;+ ]

     <td>none

     <td>block container elements and grid container elements

     <td>no

     <td>see individual properties

     <td>visual

    <tr>
     <th><a class=property
      href="#grid-template-areas">grid-template-areas</a>

     <td>none | &lt;string&gt;+

     <td>none

     <td>block container elements [CSS21] and grid container elements
      [CSS-GRID-1]

     <td>no

     <td>N/A

     <td>visual

    <tr>
     <th><a class=property
      href="#grid-template-columns">grid-template-columns</a>

     <td>auto | &lt;col-width&gt;+

     <td>auto

     <td>block container elements and grid container elements

     <td>no

     <td>N/A

     <td>visual

    <tr>
     <th><a class=property href="#grid-template-rows">grid-template-rows</a>

     <td>auto | &lt;row-height&gt;+

     <td>auto

     <td>block container elements and grid container elements

     <td>no

     <td>N/A

     <td>visual
  </table>
  <!--end-properties-->

  <script src="//www.w3.org/scripts/TR/2016/fixup.js"></script>
